import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Breadcrumb, { Item } from '../../components/Breadcrumb';
import { name } from '../../../../package.json';
import cn from 'classnames';
import s from './style.module.css';
import Form from '@knownsec/react-component/dist/Form';
import Input from '@knownsec/react-component/dist/Input';
import Select from '@knownsec/react-component/dist/Select';
import Checkbox from '@knownsec/react-component/dist/Checkbox';
import Radio from '@knownsec/react-component/dist/Radio';
import Button from '@knownsec/react-component/dist/Button';
import Confirm from '@knownsec/react-component/dist/Confirm';
import Dialog from '@knownsec/react-component/dist/Dialog';
import Switch from '@knownsec/react-component/dist/Switch';
import Table from '@knownsec/react-component/dist/Table';
import InputNumber from '@knownsec/react-component/dist/InputNumber';
import Textarea from '@knownsec/react-component/dist/Textarea';
import Icon from '@knownsec/react-component/dist/Icon';
import Tooltip from '@knownsec/react-component/dist/Tooltip';
import Message from '@knownsec/react-component/dist/Message';
import { Link } from 'react-router-dom';
import Helper from '../../components/Helper';
import Label from '../../components/Label';
import CollectFrequency from '../../components/CollectFrequency';
import fetchFer from 'API/fetch';
import { withRouter } from 'react-router';
import { GetQueryString } from '../../helpers/getUrlParams';
import notification from '@kuiper-components/notification';
import pathOr from 'ramda/es/pathOr';
import { diff } from '../../../common/validation/common';
import { cloneDeep } from 'lodash';
import { getResD } from '../../index';

import AviliableCreateJob from './aviliableCreateJob';

import ms from 'ms';
import {
	VUL_TYPE_MAP,
	SSL_CATEGORY_KEY_LABEL_MAP,
	SECURITY_EVENT_TYPE_MAP,
	CONTENT_KEYWORD_TYPES,
	CONTENT_PRIVACY_DISCLOSURE_TYPES,
	FREQ_UNIT_MAP,
	NODE_ID_LABEL_MAP2,
	FREQUENCY_NUMBERS,
	WEAKNESS_FREQUENCY_UNIT_MAP,
	FREQUENCY_UNIT_MAP,
} from '../../../common/constants';
import { CheckmarkOutline32 as Success9 } from '@carbon/icons-react';
import { add } from 'date-fns';
const hostColumns = [
	{
		title: 'IP地址',
		dataIndex: 'ip',
		key: 'ip',
	},
	{
		title: '登录端口',
		dataIndex: 'post',
		key: 'post',
	},
	{
		title: '用户名',
		dataIndex: 'username',
		key: 'username',
	},
	{
		title: '更新时间',
		dataIndex: 'update_time',
		key: 'update_time',
	},
	{
		title: '操作',
		dataIndex: 'modify',
		key: 'modify',
	},
];
const intervalFormat = value => {
	let unit;
	let num;
	if (value) {
		const freq = ms(value);
		unit = value ? freq.replace(/\d*/, '') : 'd';
		num = parseInt(freq.replace(/[a-zA-Z]/, ''), 10);
		if (value % ms('30d') === 0) {
			unit = 'month';
			num = value / ms('30d');
		} else if (value % ms('1w') === 0) {
			unit = 'w';
			num = value / ms('1w');
		}
	}
	return `${num}${FREQUENCY_UNIT_MAP[unit]}`;
};
const CONTENT_KEYWORD_TYPES_MAP = CONTENT_KEYWORD_TYPES.reduce((t, i) => {
	t[i.idx] = i.label;
	return t;
}, {});
const CONTENT_PRIVACY_DISCLOSURE_TYPES_MAP = CONTENT_PRIVACY_DISCLOSURE_TYPES.reduce(
	(t, i) => {
		t[i.idx] = i.label;
		return t;
	},
	{}
);
const defaultWebData = {
	name: '',
	job_ids: [],
	type: 1,
	interval: 604800000,
	trigger_type: 'schedule',
	vul_settings: {
		interval: 86400000,
		vulType: 'all',
		enableSitePortraitTriggerMonitor: false,
		enable: true,
		collect: {
			type: 'increment',
			depth: [3],
			maxPage: [1000],
			speed: ['medium'],
			vulns: [],
			vul: Object.keys(VUL_TYPE_MAP),
		},
	},
	ssl_settings: {
		interval: 86400000,
		enable: true,
		sslType: 'all',
		collect: {
			pluginCategories: Object.keys(SSL_CATEGORY_KEY_LABEL_MAP),
		},
	},
	content_settings: {
		type: 'full',
		interval: 86400000,
		enable: true,
		collect: {
			includeUrl: '/',
			depth: [3],
			maxPage: [1000],
			plugins: ['keyword', 'privacy_disclosure'],
			privacyDisclosureStatus: true,
			privacyDisclosureTypes: CONTENT_PRIVACY_DISCLOSURE_TYPES.reduce(
				(t, i) => {
					t.push(i.idx);
					return t;
				},
				[]
			),
			systemKeywordStatus: true,
			systemKeywordTypes: CONTENT_KEYWORD_TYPES.reduce((t, i) => {
				t.push(i.idx);
				return t;
			}, []),
		},
	},
	security_event_settings: {
		interval: 86400000,
		enable: true,
		securityType: 'all',
		collect: {
			depth: [3],
			maxPage: [1000],
			plugins: Object.keys(SECURITY_EVENT_TYPE_MAP),
		},
	},
	hostSettings: {
		// is_detect_port_enabled: true,
		is_tcp_enabled: true,
		is_udp_enabled: false,
		is_detect_os_enabled: true,
	},
	prelogin: {
		site_login: false,
		login_method: 'form',
		login_form_action_url: '',
		login_form_postdata: '',
		login_json_action_url: '',
		login_json_postdata: '',
		request_cookie: '',
		request_http_headers: '',
		is_http_auth_enabled: false,
		http_auth_username: '',
		http_auth_password: '',
		is_proxy_enabled: false,
		proxy_scheme: 'http',
		proxy_host: '',
		proxy_port: 80,
		proxy_username: '',
		proxy_password: '',
	},
	custom_monitor_page: {
		includeUrl: '',
		excludeUrl: '',
	},
	alert: {
		vulType: Object.keys(VUL_TYPE_MAP),
	},
	task_type: 'http',
	aviliable_task_list: [],
	selected_aviliable_task_list: [],
	task_settings: {
		collect: {
			area: [],
			area_ipv6: [],
			method: 'get',
			header: '',
			redirect: ['3'],
		},
		alert: {
			respTime: 12000,
			enableSmartMode: true,
			innerType: 'statusCodeRange',
			statusCodeRange: '400~599',
			include: [],
			nodeCount: 5,
			alertCount: ['1'],
			enable: true,
			lossRate: 50,
		},
	},
};
// type 区分 各监测
function CreateJob({ history, location }) {
	const resD = JSON.parse(sessionStorage.resD);
	const aviliableNode = JSON.parse(sessionStorage.aviliableNode);

	const assetType = GetQueryString(location.search, 'assetType') || 'host';
	const jid = GetQueryString(location.search, 'jid');
	const note = GetQueryString(location.search, 'note');
	const atid = GetQueryString(location.search, 'atid');
	const trigger_type =
		GetQueryString(location.search, 'trigger_type') || 'schedule';
	const maxFreq = pathOr(0, ['balance', 'hostVulMaxFreq', 'total'], resD);
	const hostVulManualTask = pathOr(0, ['balance', 'hostVulManualTask'], resD);
	if (jid) {
		defaultWebData.job_ids = [jid];
		defaultWebData.name = note;
	}
	defaultWebData.task_type = resD?.feature?.httpTask ? 'http' : 'ping';
	defaultWebData.task_settings.collect.area = aviliableNode?.default_v4;
	defaultWebData.vul_settings.enable = pathOr(0, ['feature', 'vulTask'], resD);
	defaultWebData.ssl_settings.enable = pathOr(0, ['feature', 'sslTask'], resD);
	defaultWebData.security_event_settings.enable = pathOr(
		0,
		['feature', 'securityEventTask'],
		resD
	);
	defaultWebData.content_settings.enable = pathOr(
		0,
		['feature', 'contentTask'],
		resD
	);
	const [vulnsMap, setVulnsMap] = useState(null);
	const [vulnsList, setVulnsList] = useState([]);
	const timeChange = (value, type) => {
		let unit;
		let num;
		if (value) {
			const freq = ms(value);
			unit = value ? freq.replace(/\d*/, '') : 'd';
			num = parseInt(freq.replace(/[a-zA-Z]/, ''), 10);
			if (value % ms('30d') === 0) {
				unit = 'month';
				num = value / ms('30d');
			} else if (value % ms('1w') === 0) {
				unit = 'w';
				num = value / ms('1w');
			}
		}
		if (type === 'num') return num;
		if (type === 'unit') return unit;
	};
	const VUL_SETTING_OPTIONS = window.kuiper?.app?.config[name].settingOptions;
	const [step, setStep] = useState(1);
	const [taskInfoDialog, setTaskInfoDialog] = useState(false);
	const [typeText, setTypeText] = useState([
		'新建监测任务',
		'创建任务',
		'下发任务',
	]);
	const [jobList, setJobList] = useState([]);
	const [form] = Form.useForm();
	const [formData, setFormData] = useState(defaultWebData);
	const [showInterval, setShowInterval] = useState(true);
	const [updateJob, setUpdateJob] = React.useState(null);
	const [isOnSubmit, setIsOnSubmit] = useState(false);
	const [taskType, setTaskType] = useState('http');
	const [controlMap, setControlMap] = useState({
		vul: 'down',
		ssl: 'down',
		asset: 'down',
		content: 'down',
		login: 'down',
		custom: 'down',
		http: 'down',
		ping: 'down',
		alert: 'down',
	});
	// 可用性
	const [taskList, setTaskList] = useState([
		{
			enableSitePortraitTriggerMonitor: false,
			enable: true,
			name: '',
			target: '',
			key: 0,
			jobId: '',
			jobName: '',
			interval: 300000,
			taskId: '',
			method: '',
		},
	]);
	const [jobMap, setJobMap] = useState({});
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const getVulnsList = async () => {
		const res = await fetchFer(`/api/v2/vulndb/kb_vulns`, {
			method: 'GET',
			checkStatus: 501,
		}).catch(err => {
			return err;
		});
		const mapData = {};
		const data = res.data.map(item => {
			mapData[item.source_id] = item.name.zh_cn;
			return { label: item.name.zh_cn, value: item.source_id };
		});
		setVulnsMap(mapData);
		setVulnsList(data);
	};
	useEffect(() => {
		initForm();
		getTarget();
	}, [location]);
	useEffect(() => {
		getTarget();
		getVulnsList();
	}, [showInterval, updateJob]);
	// 可用性表格
	const changeItem = (newItem, index, allList) => {
		const list = cloneDeep(
			form?.current?.getFieldValue('aviliable_task_list') || []
		);
		list.splice(index, 1, newItem);
		form?.current?.setFieldsValue(
			Object.assign({}, form?.current?.getFieldValue(), {
				aviliable_task_list: list,
			})
		);
		setTaskList(list);
	};
	const addNewItem = (id, jname = '', item = {}) => {
		let jobId = '';
		let jobName = '';
		if (id) {
			jobId = id;
			jobName = jname || jobMap[id];
		}
		return {
			enableSitePortraitTriggerMonitor: false,
			enable: true,
			name: '',
			target: '',
			key: 0,
			jobId,
			jobName,
			interval: 300000,
			taskId: '',
			errorMsg: {},
			...item,
		};
	};
	const tableMethod = (type, index) => {
		if (form?.current?.getFieldValue('job_ids').length === 0) {
			return Message.show({
				type: 'error',
				message: '请先选择资产地址',
			});
		}
		let list = cloneDeep(form?.current?.getFieldValue('aviliable_task_list'));
		if (type === 'removeBatch') {
			list = list.reduce((t, i, k) => {
				if (
					form?.current
						?.getFieldValue('selected_aviliable_task_list')
						.indexOf(k) === -1
				) {
					t.push(i);
				}
				return t;
			}, []);
			form?.current?.setFieldsValue(
				Object.assign({}, form?.current?.getFieldValue(), {
					selected_aviliable_task_list: [],
				})
			);
			setSelectedRowKeys([]);
		} else {
			const addRow = addNewItem(list[index].jobId, list[index].jobName);
			addRow.name = '';
			addRow.target = '';
			if (type === 'add') {
				list.splice(index + 1, 0, addRow);
			} else {
				list.splice(index, 1);
			}
		}
		if (list.length === 0) {
			list.push(addNewItem());
		} else {
			list = list.map((i, k) => {
				i.key = k;
				return i;
			});
		}
		const ids = Array.from(
			new Set(
				list.map(item => {
					return item.jobId;
				})
			)
		).filter(item => {
			return item;
		});
		form?.current?.setFieldsValue(
			Object.assign({}, form?.current?.getFieldValue(), {
				aviliable_task_list: list,
				job_ids: ids,
			})
		);
		setTaskList(list);
	};
	const aviliableTableMethodTitle = () => {
		const isShow = !!form?.current?.getFieldValue(
			'selected_aviliable_task_list'
		).length;
		return (
			<div className={cn(s.pl30)}>
				{isShow ? (
					<Icon
						type="remove"
						key={isShow}
						onClick={() => tableMethod('removeBatch')}
						className={cn(s.errorColor, s.fs20, s.methodIcon, s.show)}
					/>
				) : (
					<Icon
						type="remove"
						key={isShow}
						onClick={() => tableMethod('removeBatch')}
						className={cn(s.errorColor, s.fs20, s.methodIcon)}
					/>
				)}
			</div>
		);
	};

	const methodIcon = index => {
		return (
			<div className={cn(s.df, s.aic, s.mb18)}>
				{form?.current?.getFieldValue('task_type') === 'http' && (
					<Icon
						type="add"
						onClick={() => tableMethod('add', index)}
						className={cn(s.cp, s.primaryColor, s.fs20, s.mr10)}
					/>
				)}
				<Icon
					type="remove"
					onClick={() => tableMethod('remove', index)}
					className={cn(s.cp, s.errorColor, s.fs20)}
				/>
			</div>
		);
	};
	const columns = ({ taskType }) => {
		const col = [
			{
				title: <div className={s.required}>任务名称</div>,
				key: 'name',
				dataIndex: 'name',
				width: 190,
				render(e, row, index) {
					const newErrorMsg = cloneDeep(row.errorMsg);
					if (newErrorMsg?.name) {
						delete newErrorMsg.name;
					}
					return (
						<Form.Item
							validateStatus={row.errorMsg?.name ? 'error' : ''}
							help={row.errorMsg?.name || ''}
						>
							<Input
								placeholder="请输入任务名称"
								size="mini"
								value={e}
								disabled={!row.jobId}
								onChange={({ value }) =>
									changeItem(
										{ ...row, name: value, errorMsg: newErrorMsg },
										index
									)
								}
							/>
						</Form.Item>
					);
				},
			},
			{
				title: (
					<div className={cn(s.df, s.aic, s.required)}>
						监测目标
						<Helper
							placement="top"
							overlay={
								<div style={{ width: '300px' }}>
									如您需要监测地址入口是'https://www.scanv.com/admin/'，可在此输入'/admin/'即可；若您需要监测的地址是资产本身，则在此输入'/'即可。
								</div>
							}
						/>
					</div>
				),
				key: 'target',
				dataIndex: 'target',
				render(e, row, index) {
					const newErrorMsg = cloneDeep(row.errorMsg);
					if (newErrorMsg?.target) {
						delete newErrorMsg.target;
					}
					const jobName = row?.jobName?.split('(')[0];
					const ip = row?.jobName?.split('(')[1]
						? `(${row?.jobName?.split('(')[1]}`
						: '';
					return taskType === 'http' ? (
						<Form.Item
							validateStatus={row.errorMsg?.target ? 'error' : ''}
							help={row.errorMsg?.target || ''}
						>
							<Input
								size="mini"
								onChange={({ value }) => {
									changeItem(
										{
											...row,
											target:
												value && value.indexOf('/') !== 0 ? '/' + value : value,
											errorMsg: newErrorMsg,
										},
										index
									);
								}}
								prepend={
									row.jobName && (
										<Tooltip
											overlay={
												<div
													style={{ maxWidth: '300px', wordWrap: 'break-word' }}
												>
													{row.jobName}
												</div>
											}
											placement="topLeft"
										>
											<span>{row.jobName}</span>
										</Tooltip>
									)
								}
								className={s.preInput}
								disabled={atid || !row.jobId}
								placeholder={!row.jobId ? '请选择资产' : '请输入地址'}
								value={e}
							/>
						</Form.Item>
					) : (
						<div title={jobName + e + ip}>
							<Input
								size="mini"
								className={s.mb18}
								value={jobName + e + ip}
								placeholder={!row.jobId && '请先选择资产地址'}
								disabled
							/>
						</div>
					);
				},
			},
			{
				title: '监测频率',
				key: 'interval',
				dataIndex: 'interval',
				className: s.tou,
				width: taskType === 'http' ? 160 : 200,
				render(e, row, index) {
					return (
						<CollectFrequency
							value={e}
							className={s.miniSelect}
							onChange={value => changeItem({ ...row, interval: value }, index)}
							disabled={!row.jobId}
							maxFreq={
								taskType === 'http'
									? pathOr(0, ['balance', 'httpMaxFreq', 'total'], resD)
									: pathOr(0, ['balance', 'pingMaxFreq', 'total'], resD)
							}
							numbers={FREQUENCY_NUMBERS}
							unitMap={FREQUENCY_UNIT_MAP}
						/>
					);
				},
			},
		];
		if (!atid) {
			col.push({
				title: () => aviliableTableMethodTitle(),
				key: 'method',
				dataIndex: 'method',
				width: taskType == 'http' ? 80 : 40,
				render(e, row, index) {
					return methodIcon(index);
				},
			});
		}
		return col;
	};
	const getTarget = async () => {
		const type = showInterval ? 'schedule' : 'manual';
		const url = `/api/v2/jobs/job_id_list?task_group_type=${
			assetType === 'host'
				? 'host'
				: assetType === 'web'
				? 'web_security'
				: form?.current?.getFieldValue('task_type')
		}&asset_type=${
			assetType === 'aviliable' ? 'web' : assetType
		}&trigger_type=${type}`;
		const jobListRes = await fetchFer(url, { method: 'GET' });
		if (updateJob) {
			setJobList([
				{
					label:
						updateJob.jobName +
						'\t' +
						updateJob.targetUrl +
						(updateJob.source_ip && assetType !== 'host'
							? `(${updateJob.source_ip})`
							: ''),
					value: updateJob.jobId,
					labelHtml: `<span style="width: 30%;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title='${
						updateJob.jobName +
						(updateJob.source_ip && assetType !== 'host'
							? `(${updateJob.source_ip})`
							: '')
					}'>${
						updateJob.jobName +
						(updateJob.source_ip ? `(${updateJob.source_ip})` : '')
					}</span>
			 <span style="width: 60%;display: inline-block;margin-left: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title='${
					updateJob.targetUrl
				}'>${updateJob.targetUrl}</span>`,
				},
			]);
			setJobMap({
				[updateJob.jobId]:
					updateJob.targetUrl +
					(updateJob.source_ip && assetType !== 'host'
						? `(${updateJob.source_ip})`
						: ''),
			});
		} else {
			if (jobListRes.code === 200) {
				setJobList(
					jobListRes.data.map(item => {
						const labelHtml = `
							<span style="width: ${
								assetType !== 'host' ? '25' : '35'
							}%;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title='${
							item.note
						}'>${item.note}</span>
							<span style="width: ${
								assetType !== 'host' ? '52' : '62'
							}%;display: inline-block;margin-left: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title='${
							item.target_url
						}'>${item.target_url}</span>
							${
								assetType !== 'host'
									? `<span style="width: 18%;display: inline-block;margin-left: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title='${
											item.source_ip
									  }'>${item.source_ip || ''}</span>`
									: ''
							}
						`;
						return {
							label:
								item.note +
								'\t' +
								item.target_url +
								(item.source_ip && assetType !== 'host'
									? '\t' + `(${item.source_ip})`
									: ''),
							labelHtml,
							value: item.job_id,
						};
					})
				);
			}
			setJobMap(
				jobListRes.data.reduce((total, item) => {
					total[item.job_id] =
						item.target_url +
						(item.source_ip && assetType !== 'host'
							? `(${item.source_ip})`
							: '');
					return total;
				}, {})
			);
		}
	};
	const initForm = async () => {
		if (atid) {
			const url =
				assetType === 'host'
					? `/api/v2/jobs/host_vul_task_settings?asset_task_id=${atid}`
					: assetType === 'web'
					? `/api/v2/tasks/web_security/config/detail?asset_task_id=${atid}`
					: `/api/v2/tasks/available/config/detail?asset_task_id=${atid}`;
			setTypeText(['编辑监测任务', '编辑任务', '保存']);
			const res = await fetchFer(url, { method: 'GET' });
			const params =
				assetType === 'host'
					? {
							name: res.data?.name,
							trigger_type: res.data?.trigger_type,
							jobId: res.data?.job_id,
							job_ids: [res.data?.job_id],
							job_name: res.data?.job_name,
							target_url: res.data?.target_url,
							source_ip: res.data?.source_ip,
							interval: res.data?.interval,
							hostSettings: {
								// is_detect_port_enabled: res.data?.is_detect_port_enabled,
								is_tcp_enabled: res.data?.is_tcp_enabled,
								is_udp_enabled: res.data?.is_udp_enabled,
								is_detect_os_enabled: res.data?.is_detect_os_enabled,
							},
					  }
					: cloneDeep(res.data);
			if (assetType === 'web') {
				params.job_ids = params.jobId.split(',');
				params.vul_settings = cloneDeep(params.vulSettings);
				if (!pathOr(0, ['feature', 'vulTask'], resD)) {
					params.vul_settings.enable = false;
				}
				params.vul_settings.collect.depth = params.vul_settings.collect.depth
					? [params.vul_settings.collect.depth]
					: [];
				params.vul_settings.collect.maxPage = params.vul_settings.collect
					.maxPage
					? [params.vul_settings.collect.maxPage]
					: [];
				params.vul_settings.collect.speed = params.vul_settings.collect.speed
					? [params.vul_settings.collect.speed]
					: ['medium'];
				params.vul_settings.collect.includeUrl = params.vul_settings.collect
					.includeUrl
					? params.vul_settings.collect.includeUrl.join('\n')
					: '';
				if (
					params.vul_settings.collect.vul.length ===
					Object.keys(VUL_TYPE_MAP).length
				) {
					params.vul_settings.vulType = 'all';
				} else {
					params.vul_settings.vulType = 'notAll';
				}

				params.ssl_settings = cloneDeep(params.sslSettings);
				if (
					params.ssl_settings.collect.pluginCategories.length ===
					Object.keys(SSL_CATEGORY_KEY_LABEL_MAP).length
				) {
					params.ssl_settings.sslType = 'all';
				} else {
					params.ssl_settings.sslType = 'notAll';
				}
				// SSL是否可选
				const enableType =
					params.trigger_type === 'manual'
						? pathOr(0, ['feature', 'sslManualTask'], resD) &&
						  pathOr(0, ['balance', 'sslManualTask', 'total'], resD) -
								pathOr(0, ['balance', 'sslManualTask', 'used'], resD) >
								0
						: pathOr(0, ['feature', 'sslTask'], resD);
				const hasHttps = params.targetUrl.split('://')[0] === 'https';
				if (!enableType || !hasHttps) {
					params.ssl_settings.enable = false;
				}

				params.security_event_settings = cloneDeep(
					params.securityEventSettings
				);
				if (!pathOr(0, ['feature', 'securityEventTask'], resD)) {
					params.security_event_settings.enable = false;
				}
				params.security_event_settings.collect.depth = params
					.security_event_settings.collect.depth
					? [params.security_event_settings.collect.depth]
					: [];
				params.security_event_settings.collect.maxPage = params
					.security_event_settings.collect.maxPage
					? [params.security_event_settings.collect.maxPage]
					: [];
				if (
					params.security_event_settings.collect.plugins.length ===
					Object.keys(SECURITY_EVENT_TYPE_MAP).length
				) {
					params.security_event_settings.securityType === 'all';
				} else {
					params.security_event_settings.securityType === 'notAll';
				}

				params.content_settings = cloneDeep(params.contentSettings);
				if (!pathOr(0, ['feature', 'contentTask'], resD)) {
					params.content_settings.enable = false;
				}
				params.content_settings.collect.depth = params.content_settings.collect
					.depth
					? [params.content_settings.collect.depth]
					: [];
				params.content_settings.collect.maxPage = params.content_settings
					.collect.maxPage
					? [params.content_settings.collect.maxPage]
					: [];
				if (
					params.content_settings.collect.plugins.indexOf(
						'privacy_disclosure'
					) > -1
				)
					params.content_settings.collect.privacyDisclosureStatus = true;
				if (params.content_settings.collect.plugins.indexOf('keyword') > -1)
					params.content_settings.collect.systemKeywordStatus = true;
				if (params.content_settings.collect.includeUrl.length > 0) {
					params.content_settings.collect.includeUrl = params.content_settings.collect.includeUrl.join(
						'\n'
					);
					params.content_settings.type = 'assign';
				} else {
					params.content_settings.type = 'full';
					params.content_settings.collect.includeUrl = '/';
				}

				params.custom_monitor_page = cloneDeep(params.customMonitorPage);
				params.custom_monitor_page.includeUrl = params.custom_monitor_page
					.includeUrl
					? params.custom_monitor_page.includeUrl.join('\n')
					: '';
				params.custom_monitor_page.excludeUrl = params.custom_monitor_page
					.excludeUrl
					? params.custom_monitor_page.excludeUrl.join('\n')
					: '';
			}
			if (assetType === 'aviliable') {
				params.job_ids = params.job_id.split(',');
				params.task_settings = cloneDeep(params.task_settings);
				params.task_settings.alert.alertCount = [
					params.task_settings.alert.alertCount.toString(),
				];
				const jobName =
					params.target_url + (params.source_ip ? `(${params.source_ip})` : '');
				params.aviliable_task_list = [
					addNewItem(params.job_id, jobName, {
						...params.task_settings,
						target: params.task_settings.target.split(params.target_url)[1],
					}),
				];
				setTaskList([
					addNewItem(params.job_id, jobName, {
						...params.task_settings,
						target: params.task_settings.target.split(params.target_url)[1],
					}),
				]);
				if (params.task_type === 'http') {
					params.task_settings.collect.redirect = [
						params.task_settings.collect.redirect.toString(),
					];
					params.task_settings.collect.header = params?.task_settings?.collect
						?.header
						? Object.keys(params?.task_settings?.collect?.header)
								.map(key => {
									return `${key}: ${params.task_settings.collect.header[key]}`;
								})
								.join('\n')
						: '';
					params.task_settings.alert.statusCodeRange = params.task_settings.alert.statusCodeRange
						.map(item => {
							return `${item[0]}${item[1] ? '~' + item[1] : ''}`;
						})
						.join('s');
				}
				setTaskType(params.task_type);
			}
			setUpdateJob({
				jobId: params.jobId || params.job_id,
				jobName: params.job_name,
				targetUrl: params.targetUrl || params.target_url,
				source_ip: params.source_ip || '',
			});
			setShowInterval(res.data?.trigger_type === 'schedule');
			form?.current?.setFieldsValue(params);
		} else {
			form?.current?.setFieldsValue(defaultWebData);
		}
	};
	const nextStep = async () => {
		const formData = await form?.current?.validateFields().catch(e => {
			return null;
		});
		if (formData) {
			if (assetType === 'aviliable') {
				if (methodError('check')) {
					setStep(step + 1);
				}
			} else {
				if (
					assetType === 'web' &&
					!formData.vul_settings.enable &&
					!formData.ssl_settings.enable &&
					!formData.security_event_settings.enable &&
					!formData.content_settings.enable
				) {
					return Message.show({ type: 'error', message: '请选择监测项' });
				} else {
					setStep(step + 1);
				}
			}
		}
	};
	const [hostSubmit, setHostSubmit] = useState(false);
	const submitForm = async () => {
		const sendData = await form?.current?.validateFields().catch(e => {
			return null;
		});
		const de = diff(sendData.hostSettings, defaultWebData.hostSettings);
		let text = '若不进行任务配置将采用默认配置，您确定要现在下发任务吗？';
		if (Object.keys(de).length || step === 2) {
			text = '您确定要下发任务吗？';
		}
		if (atid) {
			text = '您确定保存当前任务配置？';
			// sendFun(sendData);
			// return false;
		}
		// return false;
		if (step !== 3) {
			Confirm({
				title: '提示',
				className: s.w472,
				message: <div className={s.p20_40}>{text}</div>,
				onconfirm: async () => {
					sendFun(sendData);
				},
				oncancel: () => {},
			});
		} else {
		}
	};
	const sendFun = async sendData => {
		if (hostSubmit) return false;
		setHostSubmit(true);
		const params = {
			name: sendData.name,
			trigger_type: sendData.trigger_type,
			job_ids: sendData.job_ids,
			interval: sendData.interval,
			// is_detect_port_enabled: sendData.hostSettings.is_detect_port_enabled,
			is_tcp_enabled: sendData.hostSettings.is_tcp_enabled,
			is_udp_enabled: sendData.hostSettings.is_udp_enabled,
			is_detect_os_enabled: sendData.hostSettings.is_detect_os_enabled,
		};
		if (atid) {
			params.asset_task_id = atid;
		}
		const res = await fetchFer(`/api/v2/jobs/host_vul_task`, {
			method: 'POST',
			body: JSON.stringify(params),
			checkStatus: 501,
		}).catch(err => {
			return err;
		});
		if (res.code === 200 || res.code === 0) {
			notification.success({
				message: '操作成功',
				placement: 'top',
			});
			setHostSubmit(false);
			if (atid) {
				window.history.back();
			} else {
				history.push(`/job-manage/host-task`);
			}
		} else {
			setHostSubmit(false);
			notification.error({
				type: 'error',
				message: res.msg,
				placement: 'top',
			});
		}
	};
	const validatormap = (rule, value) => {
		// message: '请选择监测资产'
		if (rule.field === 'job_ids' && !value[0]) {
			// eslint-disable-next-line prefer-promise-reject-errors
			return Promise.reject('请选择监测资产');
		}
		if (rule.field === 'name' && (!value || !value.trim())) {
			// eslint-disable-next-line prefer-promise-reject-errors
			return Promise.reject('请输入任务名称');
		}
		if (step === 2 && rule.field === 'task_settings.alert.respTime') {
			const formData = form?.current?.getFieldValue();
			if (!value?.toString().trim()) {
				return Promise.reject('请输入响应时间');
			}
			if (
				formData?.task_type === 'http' &&
				!formData?.task_settings?.alert?.statusCodeRange?.trim()
			) {
				return Promise.reject('请输入状态码范围');
			}
			if (
				formData?.task_type === 'ping' &&
				!formData?.task_settings?.alert?.lossRate?.toString()?.trim()
			) {
				return Promise.reject('请输入丢包率');
			}
		}
		if (
			step === 2 &&
			rule.field === 'task_settings.alert.nodeCount' &&
			!value.toString().trim()
		) {
			// eslint-disable-next-line prefer-promise-reject-errors
			return Promise.reject('请输入告警节点数');
		}
		if (
			step === 2 &&
			rule.field === 'task_settings.alert.alertCount' &&
			!value.toString().trim()
		) {
			// eslint-disable-next-line prefer-promise-reject-errors
			return Promise.reject('请输入告警次数');
		}
		return Promise.resolve();
	};
	// 表单值绑定
	const onValues = (data, allValues) => {
		setFormData({ ...formData, ...data });
		data.trigger_type && setShowInterval(data.trigger_type === 'schedule');
		if (form.current) {
			form?.current?.setFieldsValue(
				Object.assign({}, form?.current?.getFieldValue(), data)
			);
		}
		if (assetType === 'web') {
			if (Object.keys(data)[0] === 'trigger_type') {
				const vulEnableType =
					data.trigger_type === 'manual'
						? pathOr(0, ['feature', 'vulManualTask'], resD) &&
						  pathOr(0, ['balance', 'vulManualTask', 'total'], resD) -
								pathOr(0, ['balance', 'vulManualTask', 'used'], resD) >
								0
						: pathOr(0, ['feature', 'vulTask'], resD);
				const sslEnableType =
					data.trigger_type === 'manual'
						? pathOr(0, ['feature', 'sslManualTask'], resD) &&
						  pathOr(0, ['balance', 'sslManualTask', 'total'], resD) -
								pathOr(0, ['balance', 'sslManualTask', 'used'], resD) >
								0
						: pathOr(0, ['feature', 'sslTask'], resD);
				const securityEventEnableType =
					data.trigger_type === 'manual'
						? pathOr(0, ['feature', 'securityEventManualTask'], resD) &&
						  pathOr(0, ['balance', 'securityEventManualTask', 'total'], resD) -
								pathOr(
									0,
									['balance', 'securityEventManualTask', 'used'],
									resD
								) >
								0
						: pathOr(0, ['feature', 'securityEventTask'], resD);
				const contentEnableType =
					data.trigger_type === 'manual'
						? pathOr(0, ['feature', 'contentManualTask'], resD) &&
						  pathOr(0, ['balance', 'contentManualTask', 'total'], resD) -
								pathOr(0, ['balance', 'contentManualTask', 'used'], resD) >
								0
						: pathOr(0, ['feature', 'contentTask'], resD);
				setFormData({
					...formData,
					...data,
					...{
						vul_settings: {
							enable: vulEnableType,
							collect: {
								...form?.current?.getFieldValue('vul_settings').collect,
							},
							vulType: data.trigger_type === 'manual' ? 'type' : 'all',
						},
						ssl_settings: { enable: sslEnableType },
						security_event_settings: { enable: securityEventEnableType },
						content_settings: { enable: contentEnableType },
					},
				});
				form?.current?.setFieldsValue({
					...data,
					vul_settings: {
						enable: vulEnableType,
						collect: {
							...form?.current?.getFieldValue('vul_settings').collect,
						},
						vulType: data.trigger_type === 'manual' ? 'type' : 'all',
					},
					ssl_settings: { enable: sslEnableType },
					security_event_settings: { enable: securityEventEnableType },
					content_settings: { enable: contentEnableType },
				});
			}
			if (Object.keys(data)[0] === 'job_ids') {
				// SSL是否可选
				const enableType =
					formData.trigger_type === 'manual'
						? pathOr(0, ['feature', 'sslManualTask'], resD) &&
						  pathOr(0, ['balance', 'sslManualTask', 'total'], resD) -
								pathOr(0, ['balance', 'sslManualTask', 'used'], resD) >
								0
						: pathOr(0, ['feature', 'sslTask'], resD);
				const hasHttps =
					data.job_ids.length > 0
						? data.job_ids.reduce((t, i) => {
								if (jobMap[i]?.split('://')[0] === 'https') {
									t += 1;
								}
								return t;
						  }, 0)
						: true;
				if (!enableType || !hasHttps) {
					setFormData({
						...formData,
						...data,
						...{ ssl_settings: { enable: false } },
					});
					form?.current?.setFieldsValue({
						...data,
						ssl_settings: { enable: false },
					});
					setControlMap({ ...controlMap, ssl: 'up' });
				}
				if (data.job_ids.length > 1) {
					setFormData({
						...formData,
						...data,
						...{
							prelogin: {
								site_login: false,
								is_http_auth_enabled: false,
								is_proxy_enabled: false,
							},
							custom_monitor_page: { includeUrl: '', excludeUrl: '' },
						},
					});
					form?.current?.setFieldsValue({
						...data,
						prelogin: {
							site_login: false,
							is_http_auth_enabled: false,
							is_proxy_enabled: false,
						},
						custom_monitor_page: { includeUrl: '', excludeUrl: '' },
					});
				}
			}
			if (Object.keys(Object.values(data)[0])[0] === 'enable') {
				const map = {
					vul_settings: 'vul',
					ssl_settings: 'ssl',
					security_event_settings: 'asset',
					content_settings: 'content',
				};
				setControlMap({
					...controlMap,
					[map[Object.keys(data)[0]]]: Object.values(data)[0].enable
						? 'down'
						: 'up',
				});
			}
		}
		if (assetType === 'aviliable') {
			if (data.job_ids) {
				let list = [];
				if (taskList.length === 1 && !taskList[0].jobId) {
					data.job_ids.map(id => {
						list.push(addNewItem(id, '', { name: '首页', target: '/' }));
					});
				} else {
					const taskIdList = Array.from(
						new Set(
							taskList.map(item => {
								return item.jobId;
							})
						)
					);
					const newJobIds = data.job_ids.filter(
						v => !taskIdList.some(item => item === v)
					);
					taskList.map(item => {
						if (data.job_ids.indexOf(item.jobId) > -1) {
							list.push(item);
						}
					});
					newJobIds.map(id => {
						list.push(addNewItem(id, '', { name: '首页', target: '/' }));
					});
				}
				list = list.map((i, k) => {
					i.key = k;
					return i;
				});
				if (list.length === 0) {
					list.push(addNewItem());
				}
				setFormData({ ...formData, ...data, aviliable_task_list: list });
				form?.current?.setFieldsValue(
					Object.assign(
						{},
						form?.current?.getFieldValue(),
						{ aviliable_task_list: list },
						data
					)
				);
				setTaskList(list);
			}
			if (data.task_type) {
				getTarget();
				form?.current?.setFieldsValue(
					Object.assign(
						{},
						form?.current?.getFieldValue(),
						{ aviliable_task_list: [addNewItem()], job_ids: [] },
						data
					)
				);
				setTaskList([addNewItem()]);
				setTaskType(data.task_type);
			}
		}
	};
	const methodError = type => {
		let list = cloneDeep(form?.current?.getFieldValue('aviliable_task_list'));
		let status = true;
		list = list.map(item => {
			if (type === 'clear') {
				item.errorMsg = {};
			} else {
				if (!item.name) {
					item.errorMsg.name = '请输入任务名称';
					status = false;
				}
				if (!item.target) {
					item.errorMsg.target = '请输入监测目标';
					status = false;
				}
			}
			return item;
		});
		form?.current?.setFieldsValue(
			Object.assign({}, form?.current?.getFieldValue(), {
				aviliable_task_list: list,
			})
		);
		setTaskList(list);
		return status;
	};
	const showRes = async type => {
		const sendData = await form?.current?.validateFields().catch(e => {
			return null;
		});
		if (
			sendData &&
			!sendData.vul_settings.enable &&
			!sendData.ssl_settings.enable &&
			!sendData.security_event_settings.enable &&
			!sendData.content_settings.enable
		) {
			return Message.show({ type: 'error', message: '请选择监测项' });
		}
		if (sendData) {
			if (!type && step < 3) {
				Confirm({
					title: '提示',
					className: s.w472,
					message: (
						<div className={s.p20_40}>
							{atid
								? '您确定保存当前任务配置？'
								: '若不进行任务配置将采用默认配置，您确定要现在下发任务吗？'}
						</div>
					),
					onconfirm: async () => {
						setIsOnSubmit(false);
						setTaskInfoDialog(true);
					},
					oncancel: () => {},
				});
			} else {
				setIsOnSubmit(false);
				setTaskInfoDialog(true);
			}
			Object.keys(sendData).map(key => {
				if (
					typeof sendData[key] === 'object' &&
					!(sendData[key] instanceof Array)
				) {
					sendData[key] = cloneDeep(sendData[key], defaultWebData[key]);
				}
			});

			if (type) {
				if (isOnSubmit) return false;
				setIsOnSubmit(true);
				const data = cloneDeep(sendData);
				let url = '';
				if (!atid) {
					if (data.trigger_type === 'schedule') {
						url = '/api/v2/jobs/web_security/task/add';
					} else {
						url = '/api/v2/jobs/web_security/task/manual/add';
					}
				} else {
					url = '/api/v2/jobs/web_security/task/update';
					data.asset_task_id = atid;
				}
				// vul
				if (data.vul_settings.vulType === 'all') {
					// 监测内容
					data.vul_settings.collect.vul = Object.keys(VUL_TYPE_MAP);
					if (data.vul_settings.collect.type !== 'increment') {
						data.vul_settings.collect.speed =
							data.vul_settings.collect.speed[0];
					} // 监测方式
				}
				if (data.vul_settings.collect.type !== 'increment') {
					// 监测方式
					data.vul_settings.collect.depth = data.vul_settings.collect.depth[0];
					data.vul_settings.collect.maxPage =
						data.vul_settings.collect.maxPage[0];
				}
				if (data.vul_settings.vulType === 'plugIn')
					data.vul_settings.collect.vul = data.vul_settings.collect.vulns;
				data.vul_settings.collect.includeUrl = data.vul_settings.collect
					.includeUrl
					? data.vul_settings.collect.includeUrl.split('\n')
					: [];
				// ssl
				if (data.ssl_settings.sslType === 'all')
					data.ssl_settings.collect = {
						pluginCategories: Object.keys(SSL_CATEGORY_KEY_LABEL_MAP),
					};

				// security
				if (data.security_event_settings.securityType === 'all')
					data.security_event_settings.collect.plugins = Object.keys(
						SECURITY_EVENT_TYPE_MAP
					);
				data.security_event_settings.collect.depth =
					data.security_event_settings.collect.depth[0];
				data.security_event_settings.collect.maxPage =
					data.security_event_settings.collect.maxPage[0];
				// content
				if (data.content_settings.type === 'full') {
					data.content_settings.collect.depth =
						data.content_settings.collect.depth[0];
					data.content_settings.collect.maxPage =
						data.content_settings.collect.maxPage[0];
				}
				if (data.content_settings.type === 'assign') {
					data.content_settings.collect.includeUrl = data.content_settings
						.collect.includeUrl
						? data.content_settings.collect.includeUrl.split('\n')
						: [];
				} else {
					data.content_settings.collect.includeUrl = [];
				}
				data.content_settings.collect.plugins = [];
				if (data.content_settings.collect.privacyDisclosureStatus)
					data.content_settings.collect.plugins.push('privacy_disclosure');
				if (data.content_settings.collect.systemKeywordStatus)
					data.content_settings.collect.plugins.push('keyword');
				// 指定页面
				data.custom_monitor_page.includeUrl = data.custom_monitor_page
					.includeUrl
					? data.custom_monitor_page.includeUrl.split('\n')
					: [];
				data.custom_monitor_page.excludeUrl = data.custom_monitor_page
					.excludeUrl
					? data.custom_monitor_page.excludeUrl.split('\n')
					: [];
				const res = await fetchFer(url, {
					method: 'POST',
					body: JSON.stringify(data),
					checkStatus: 501,
				}).catch(err => {
					return err;
				});
				setTaskInfoDialog(false);
				getResD();
				setIsOnSubmit(false);
				Message.show({
					type: res.status || (res.code === 200 ? 'success' : 'error'),
					message: res.message || res.msg,
					onclose() {
						if (res.code === 200) {
							if (atid) {
								window.history.back();
							} else {
								window.location.href = '/#/job-manage/web-task';
							}
						}
					},
				});
			}
			setFormData(sendData);
		}
	};
	const aviliableSubmit = async type => {
		const sendData = await form?.current?.validateFields().catch(e => {
			return null;
		});
		if (!methodError('check')) return false;
		if (sendData) {
			setFormData(sendData);
			const nodeNum = Array.from(
				new Set(
					sendData.task_settings.collect.area.concat(
						sendData.task_settings.collect.area_ipv6
					)
				)
			).length;
			if (nodeNum === 0) {
				return Message.show({
					type: 'error',
					message: '请选择至少一个监测节点',
				});
			} else if (
				sendData.task_type === 'http' &&
				nodeNum > pathOr(0, ['balance', 'httpMaxNode', 'total'], resD)
			) {
				return Message.show({
					type: 'error',
					message: '监测节点数已超过套餐限制',
				});
			} else if (
				sendData.task_type === 'ping' &&
				nodeNum > pathOr(0, ['balance', 'pingMaxNode', 'total'], resD)
			) {
				return Message.show({
					type: 'error',
					message: '监测节点数已超过套餐限制',
				});
			}
			if (!type && !atid && step < 2) {
				Confirm({
					title: '提示',
					className: s.w472,
					message: (
						<div className={s.p20_40}>
							{atid
								? '您确定保存当前任务配置？'
								: '若不进行任务配置将采用默认配置，您确定要现在下发任务吗？'}
						</div>
					),
					onconfirm: async () => {
						setTaskInfoDialog(true);
						setIsOnSubmit(false);
					},
					oncancel: () => {},
				});
			} else {
				setTaskInfoDialog(true);
				setIsOnSubmit(false);
			}
			if (type) {
				if (isOnSubmit) return false;
				setIsOnSubmit(true);
				const task_settings = cloneDeep(sendData.task_settings);
				const data = {
					job_ids: sendData.job_ids,
					task_type: sendData.task_type,
					task_settings: null,
				};
				task_settings.alert.alertCount = Number(
					task_settings.alert.alertCount[0]
				);
				if (data.task_type === 'http') {
					task_settings.alert.statusCodeRange = task_settings.alert?.statusCodeRange
						?.split('\n')
						.map(item => {
							const [start, end] = item.split('~');
							return +end < +start ? [end, start] : [start, end];
						});
					task_settings.collect.header = task_settings.collect?.header
						?.split('\n')
						.reduce((t, item) => {
							const itemList = item.split(':');
							t[itemList[0]] = itemList[1];
							return t;
						}, {});
					task_settings.collect.redirect = Number(
						task_settings.collect.redirect[0]
					);
				}
				data.task_settings = taskList.reduce((t, i) => {
					t.push({
						name: i.name,
						job_id: i.jobId,
						target: i?.jobName?.split('(')[0] + i.target,
						enable: true,
						enableSitePortraitTriggerMonitor: false,
						interval: i.interval,
						collect: task_settings.collect,
						alert: task_settings.alert,
						taskId: form?.current?.getFieldValue('task_settings')?.taskId || '',
					});
					return t;
				}, []);
				const url = `/api/v2/jobs/available/task/${atid ? 'update' : 'add'}`;
				const res = await fetchFer(url, {
					method: 'POST',
					body: JSON.stringify(
						atid
							? {
									asset_task_id: atid,
									task_setting: data.task_settings[0],
							  }
							: data
					),
					checkStatus: 501,
				}).catch(err => {
					return err;
				});
				setTaskInfoDialog(false);
				setIsOnSubmit(false);
				if (res.code === 200) {
					getResD();
					Message.show({
						type: res.status,
						message: res.message || res.msg,
						onclose() {
							if (atid) {
								window.history.back();
							} else {
								window.location.href = '/#/job-manage/aviliable-task';
							}
						},
					});
				} else {
					if (res.code === 403) {
						const msgList = res.msg.split(',');
						let otherError = 1;
						const list = taskList.map(item => {
							const newItem = cloneDeep(item);
							msgList.some(i => {
								let target = '';
								let msg = '';
								if (i.split('历史配置中已经存在').length === 2) {
									target = i.split('历史配置中已经存在')[0];
									msg = '监测目标历史已添加';
									otherError = 0;
								}
								if (i.split('重复').length === 2) {
									target = i.split('重复')[0];
									msg = '监测目标重复';
									otherError = 0;
								}
								if (
									newItem?.jobName?.split('(')[0] +
										newItem.target +
										(newItem?.jobName?.split('(').length > 1
											? `(${newItem?.jobName?.split('(')[1]}`
											: '') ===
									target
								) {
									newItem.errorMsg.target = msg;
									otherError = 0;
								}
							});
							return newItem;
						});
						if (otherError) {
							return Message.show({
								type: 'error',
								message: res.msg || res.message,
							});
						} else {
							setTaskList(list);
							form?.current?.setFieldsValue(
								Object.assign({}, form?.current?.getFieldValue, list)
							);
							setStep(1);
						}
					} else {
						return Message.show({
							type: 'error',
							message: res.msg || res.message,
						});
					}
				}
			}
		}
	};

	return (
		<div className={s.body}>
			<Breadcrumb className={s.bread}>
				<Item key={`job-manage`} disabled>
					任务管理
				</Item>
				<Item key={`${assetType}-task`}>
					{assetType === 'web'
						? 'Web安全监测'
						: assetType === 'host'
						? '主机安全监测'
						: assetType === 'aviliable'
						? '可用性监测'
						: ''}
				</Item>
				<Item>{typeText[0]}</Item>
			</Breadcrumb>
			<div className={cn(s.content, s.con)}>
				<div className={s.allstep}>
					<div className={cn(s.step, step !== 1 ? s.grey : false)}>
						{step !== 1 && <Success9 className={cn(s.iconsize, s.vam)} />}
						<span className={cn(s.dib, s.vam)}>{typeText[1]}</span>
						<span className={s.single}></span>
					</div>
					{assetType === 'web' && (
						<div className={cn(s.step, s.ml10, step !== 2 ? s.grey : false)}>
							{step === 3 && <Success9 className={cn(s.iconsize, s.vam)} />}
							<span className={cn(s.dib, s.vam)}>监测配置</span>
							<span className={s.front}></span>
							<span className={s.single}></span>
						</div>
					)}
					<div
						className={cn(
							s.step,
							s.ml10,
							step !== (assetType === 'web' ? 3 : 2) ? s.grey : false
						)}
					>
						<span>{assetType === 'web' ? '高级' : '监测'}配置</span>
						<span className={s.front}></span>
					</div>
				</div>
				<div className={s.jobContent}>
					<Form
						ref={form}
						style={{
							width: step === 1 ? '876px' : 'calc(100% - 48px)',
							margin: '0 auto',
						}}
						name="basic"
						labelAlign="right"
						labelCol={{ span: 3 }}
						wrapperCol={{ span: 20, offset: 1 }}
						onValuesChange={(newItem, allValues) => {
							const val = recursion(newItem);
							function recursion(obj) {
								const obj_ = obj;
								const key = Object.keys(obj_);
								if (obj_[key] && typeof obj_[key] === 'object') {
									if ({}.propertyIsEnumerable.call(obj_[key], 'value')) {
										obj_[key] = obj_[key].value;
									} else if (
										{}.propertyIsEnumerable.call(obj_[key], 'selectedItem')
									) {
										if (obj_[key].selectedItem.length > 0) {
											if (obj_[key].selectedItem.length > 1) {
												obj_[key] = obj_[key].selectedItem.map(
													item => item.value
												);
											} else {
												obj_[key] = [obj_[key].selectedItem[0].value];
											}
										} else if (obj_[key].selectedItem.length === 0) {
											obj_[key] = [];
										}
									} else {
										obj_[key] = recursion(obj_[key]);
									}
								}
								return obj_;
							}
							onValues(val, allValues);
						}}
						initialValues={defaultWebData}
					>
						{/* {step === 1 && ( */}
						<div style={{ display: step === 1 ? 'block' : 'none' }}>
							<div className={s.triggerTypeBox}>
								{assetType !== 'aviliable' ? (
									<Form.Item label="任务类型" name="trigger_type">
										<Radio.Group>
											<Radio
												className={s.h24}
												value={'schedule'}
												disabled={atid}
											>
												周期性任务
											</Radio>
											<Radio
												className={cn(s.ml24, s.h24)}
												value={'manual'}
												disabled={atid}
											>
												单次任务
											</Radio>
										</Radio.Group>
									</Form.Item>
								) : (
									<Form.Item label="监测类型" name="task_type">
										<Radio.Group>
											<div className={cn(s.df)}>
												<div className={cn(s.df, s.aic)}>
													<Radio
														className={s.h24}
														value="http"
														disabled={atid || !resD?.feature?.httpTask}
													>
														HTTP
													</Radio>
													<Helper
														placement="top"
														overlay="监控Web站点中任何指定的URL，获取响应时间、可用率等数据，接收告警消息。"
													/>
												</div>
												<div className={cn(s.df, s.aic)}>
													<Radio
														className={cn(s.ml24, s.h24)}
														value="ping"
														disabled={atid || !resD?.feature?.pingTask}
													>
														Ping
													</Radio>
													<Helper
														placement="top"
														className={s.mt_2}
														overlay="对指定的服务器进行ICMP Ping检测，获取响应时间、丢包率等数据，接收告警消息。"
													/>
												</div>
											</div>
										</Radio.Group>
									</Form.Item>
								)}
								{!showInterval && assetType === 'host' && (
									<div className={s.tipsBox}>
										<svg
											t="1632473432354"
											className="icon"
											viewBox="0 0 1024 1024"
											version="1.1"
											xmlns="http://www.w3.org/2000/svg"
											p-id="2936"
											width="16"
											height="16"
										>
											<path
												d="M512 64c247.04 0 448 200.96 448 448s-200.96 448-448 448S64 759.04 64 512 264.96 64 512 64z m0 64.277333C300.416 128.277333 128.298667 300.416 128.298667 512c0 211.541333 172.117333 383.701333 383.701333 383.701333 211.541333 0 383.701333-172.16 383.701333-383.701333 0-211.584-172.16-383.701333-383.701333-383.701333z m0 586.730667a48 48 0 1 1 0 96 48 48 0 0 1 0-96zM512 234.666667a32 32 0 0 1 32 32v341.333333a32 32 0 0 1-64 0v-341.333333A32 32 0 0 1 512 234.666667z"
												p-id="2937"
												fill="#ffad41"
											></path>
										</svg>
										每月{hostVulManualTask.total}次，当月剩余
										{hostVulManualTask.total - hostVulManualTask.used < 0
											? 0
											: hostVulManualTask.total - hostVulManualTask.used}
										次
									</div>
								)}
							</div>
							{assetType !== 'aviliable' && (
								<Form.Item
									label="任务名称"
									name="name"
									// rules={[{ required: true, message: '请输入任务名称' }]}
									rules={[{ required: true, validator: validatormap }]}
								>
									<Input
										placeholder="请输入任务名称"
										className={cn(s.w90p)}
										maxlength="50"
									/>
								</Form.Item>
							)}
							<div className={s.pr}>
								<Form.Item
									label="监测资产"
									name="job_ids"
									rules={[{ required: true, validator: validatormap }]}
								>
									<Select
										placeholder="请选择监测资产"
										className={cn(
											s.w90p,
											s.jobIdSelect,
											{ [s.w100p]: assetType === 'aviliable' },
											atid && s.disw100p
										)}
										option={jobList}
										checkAll
										multiple
										searchable
										clearable
										disabled={atid}
									/>
								</Form.Item>
								{!atid && (
									<Link
										to={`/asset-manage/manage/${assetType === 'host' ? 'host' : 'web'}`}
										className={cn(s.toJob)}
										style={{
											right: assetType === 'aviliable' ? '-66px' : '8px',
										}}
									>
										添加资产
									</Link>
								)}
							</div>
							{assetType === 'web' && (
								<div className={s.taskItems}>
									<Form.Item label="监测项">
										<div className={cn(s.df, s.aic, s.pr)}>
											<Form.Item noStyle shouldUpdate>
												{({ getFieldValue }) => {
													// 是否可选
													const enableType =
														getFieldValue('trigger_type') === 'manual'
															? pathOr(0, ['feature', 'vulManualTask'], resD) &&
															  pathOr(
																	0,
																	['balance', 'vulManualTask', 'total'],
																	resD
															  ) -
																	pathOr(
																		0,
																		['balance', 'vulManualTask', 'used'],
																		resD
																	) >
																	0
															: pathOr(0, ['feature', 'vulTask'], resD);

													return (
														<div className={cn(s.pr, s.w165)}>
															<Form.Item
																labelAlign="left"
																labelCol={{ span: 0 }}
																wrapperCol={{ span: 24 }}
																valuePropName="checked"
																name={['vul_settings', 'enable']}
															>
																{enableType ? (
																	<Checkbox>Web漏洞监测</Checkbox>
																) : (
																	<Tooltip
																		overlay="请先升级套餐服务"
																		placement="top"
																	>
																		<span>
																			<Checkbox disabled>Web漏洞监测</Checkbox>
																		</span>
																	</Tooltip>
																)}
															</Form.Item>
														</div>
													);
												}}
											</Form.Item>
											<Form.Item noStyle shouldUpdate>
												{({ getFieldValue }) =>
													getFieldValue('trigger_type') === 'manual' ? (
														<div className={s.webTipsBox}>
															<svg
																t="1632473432354"
																className="icon"
																viewBox="0 0 1024 1024"
																version="1.1"
																xmlns="http://www.w3.org/2000/svg"
																p-id="2936"
																width="16"
																height="16"
															>
																<path
																	d="M512 64c247.04 0 448 200.96 448 448s-200.96 448-448 448S64 759.04 64 512 264.96 64 512 64z m0 64.277333C300.416 128.277333 128.298667 300.416 128.298667 512c0 211.541333 172.117333 383.701333 383.701333 383.701333 211.541333 0 383.701333-172.16 383.701333-383.701333 0-211.584-172.16-383.701333-383.701333-383.701333z m0 586.730667a48 48 0 1 1 0 96 48 48 0 0 1 0-96zM512 234.666667a32 32 0 0 1 32 32v341.333333a32 32 0 0 1-64 0v-341.333333A32 32 0 0 1 512 234.666667z"
																	p-id="2937"
																	fill="#ffad41"
																></path>
															</svg>
															每月
															{pathOr(
																0,
																['balance', 'vulManualTask', 'total'],
																resD
															)}
															次，当月剩余
															{pathOr(
																0,
																['balance', 'vulManualTask', 'total'],
																resD
															) -
																pathOr(
																	0,
																	['balance', 'vulManualTask', 'used'],
																	resD
																) || 0}
															次
														</div>
													) : (
														<div className={cn(s.df, s.aic, s.pr, s.t6)}>
															<Form.Item
																className={s.flex1}
																label="监测频率"
																labelAlign="left"
																labelCol={{ span: 8 }}
																wrapperCol={{ span: 16 }}
																name={['vul_settings', 'interval']}
															>
																<CollectFrequency
																	disabled={
																		!getFieldValue('vul_settings').enable
																	}
																	maxFreq={pathOr(
																		0,
																		['balance', 'vulMaxFreq', 'total'],
																		resD
																	)}
																	numbers={FREQUENCY_NUMBERS}
																	unitMap={WEAKNESS_FREQUENCY_UNIT_MAP}
																/>
															</Form.Item>
														</div>
													)
												}
											</Form.Item>
										</div>
									</Form.Item>
									<Form.Item
										labelCol={{ span: 0 }}
										wrapperCol={{ span: 24, offset: 4 }}
									>
										<div className={cn(s.df, s.aic)}>
											<Form.Item noStyle shouldUpdate>
												{data => {
													const { getFieldValue } = data;
													// 是否可选
													const enableType =
														getFieldValue('trigger_type') === 'manual'
															? pathOr(0, ['feature', 'sslManualTask'], resD) &&
															  pathOr(
																	0,
																	['balance', 'sslManualTask', 'total'],
																	resD
															  ) -
																	pathOr(
																		0,
																		['balance', 'sslManualTask', 'used'],
																		resD
																	) >
																	0
															: pathOr(0, ['feature', 'sslTask'], resD);
													const hasHttps = atid
														? updateJob?.targetUrl.split('://')[0] === 'https'
														: getFieldValue('job_ids').length > 0
														? getFieldValue('job_ids').reduce((t, i) => {
																if (jobMap[i]?.split('://')[0] === 'https') {
																	t += 1;
																}
																return t;
														  }, 0)
														: true;
													return (
														<div className={cn(s.pr, s.w165)}>
															<Form.Item
																labelAlign="left"
																labelCol={{ span: 0 }}
																wrapperCol={{ span: 24 }}
																valuePropName="checked"
																name={['ssl_settings', 'enable']}
															>
																{enableType && hasHttps ? (
																	<Checkbox>SSL安全监测</Checkbox>
																) : (
																	<Tooltip
																		overlay={
																			!enableType
																				? '请先升级套餐服务'
																				: '仅https资产支持SSL安全监测'
																		}
																		placement="top"
																	>
																		<span>
																			<Checkbox disabled>SSL安全监测</Checkbox>
																		</span>
																	</Tooltip>
																)}
															</Form.Item>
															<Helper
																className={cn(s.itemHelp, s.r31)}
																placement="top"
																overlay="仅https资产支持SSL安全监测。"
															/>
														</div>
													);
												}}
											</Form.Item>
											<Form.Item noStyle shouldUpdate>
												{({ getFieldValue }) =>
													getFieldValue('trigger_type') === 'manual' ? (
														<div className={s.webTipsBox}>
															<svg
																t="1632473432354"
																className="icon"
																viewBox="0 0 1024 1024"
																version="1.1"
																xmlns="http://www.w3.org/2000/svg"
																p-id="2936"
																width="16"
																height="16"
															>
																<path
																	d="M512 64c247.04 0 448 200.96 448 448s-200.96 448-448 448S64 759.04 64 512 264.96 64 512 64z m0 64.277333C300.416 128.277333 128.298667 300.416 128.298667 512c0 211.541333 172.117333 383.701333 383.701333 383.701333 211.541333 0 383.701333-172.16 383.701333-383.701333 0-211.584-172.16-383.701333-383.701333-383.701333z m0 586.730667a48 48 0 1 1 0 96 48 48 0 0 1 0-96zM512 234.666667a32 32 0 0 1 32 32v341.333333a32 32 0 0 1-64 0v-341.333333A32 32 0 0 1 512 234.666667z"
																	p-id="2937"
																	fill="#ffad41"
																></path>
															</svg>
															每月
															{pathOr(
																0,
																['balance', 'sslManualTask', 'total'],
																resD
															)}
															次，当月剩余
															{pathOr(
																0,
																['balance', 'sslManualTask', 'total'],
																resD
															) -
																pathOr(
																	0,
																	['balance', 'sslManualTask', 'used'],
																	resD
																) || 0}
															次
														</div>
													) : (
														<div className={cn(s.df, s.aic, s.pr, s.t6)}>
															<Form.Item
																className={s.flex1}
																label="监测频率"
																labelAlign="left"
																labelCol={{ span: 8 }}
																wrapperCol={{ span: 16 }}
																name={['ssl_settings', 'interval']}
															>
																<CollectFrequency
																	disabled={
																		!getFieldValue('ssl_settings').enable
																	}
																	maxFreq={pathOr(
																		0,
																		['balance', 'sslMaxFreq', 'total'],
																		resD
																	)}
																	numbers={FREQUENCY_NUMBERS}
																	unitMap={WEAKNESS_FREQUENCY_UNIT_MAP}
																/>
															</Form.Item>
														</div>
													)
												}
											</Form.Item>
										</div>
									</Form.Item>
									<Form.Item
										labelCol={{ span: 0 }}
										wrapperCol={{ span: 24, offset: 4 }}
									>
										<div className={cn(s.df, s.aic)}>
											<Form.Item noStyle shouldUpdate>
												{({ getFieldValue }) => {
													// 是否可选
													const enableType =
														getFieldValue('trigger_type') === 'manual'
															? pathOr(
																	0,
																	['feature', 'securityEventManualTask'],
																	resD
															  ) &&
															  pathOr(
																	0,
																	[
																		'balance',
																		'securityEventManualTask',
																		'total',
																	],
																	resD
															  ) -
																	pathOr(
																		0,
																		[
																			'balance',
																			'securityEventManualTask',
																			'used',
																		],
																		resD
																	) >
																	0
															: pathOr(
																	0,
																	['feature', 'securityEventTask'],
																	resD
															  );

													return (
														<Form.Item
															labelAlign="left"
															labelCol={{ span: 0 }}
															wrapperCol={{ span: 24 }}
															valuePropName="checked"
															name={['security_event_settings', 'enable']}
														>
															{enableType ? (
																<Checkbox>安全事件监测</Checkbox>
															) : (
																<Tooltip
																	overlay="请先升级套餐服务"
																	placement="top"
																>
																	<span>
																		<Checkbox disabled>安全事件监测</Checkbox>
																	</span>
																</Tooltip>
															)}
														</Form.Item>
													);
												}}
											</Form.Item>
											<Form.Item noStyle shouldUpdate>
												{({ getFieldValue }) =>
													getFieldValue('trigger_type') === 'manual' ? (
														<div className={s.webTipsBox}>
															<svg
																t="1632473432354"
																className="icon"
																viewBox="0 0 1024 1024"
																version="1.1"
																xmlns="http://www.w3.org/2000/svg"
																p-id="2936"
																width="16"
																height="16"
															>
																<path
																	d="M512 64c247.04 0 448 200.96 448 448s-200.96 448-448 448S64 759.04 64 512 264.96 64 512 64z m0 64.277333C300.416 128.277333 128.298667 300.416 128.298667 512c0 211.541333 172.117333 383.701333 383.701333 383.701333 211.541333 0 383.701333-172.16 383.701333-383.701333 0-211.584-172.16-383.701333-383.701333-383.701333z m0 586.730667a48 48 0 1 1 0 96 48 48 0 0 1 0-96zM512 234.666667a32 32 0 0 1 32 32v341.333333a32 32 0 0 1-64 0v-341.333333A32 32 0 0 1 512 234.666667z"
																	p-id="2937"
																	fill="#ffad41"
																></path>
															</svg>
															每月
															{pathOr(
																0,
																['balance', 'securityEventManualTask', 'total'],
																resD
															)}
															次，当月剩余
															{pathOr(
																0,
																['balance', 'securityEventManualTask', 'total'],
																resD
															) -
																pathOr(
																	0,
																	[
																		'balance',
																		'securityEventManualTask',
																		'used',
																	],
																	resD
																) || 0}
															次
														</div>
													) : (
														<div className={cn(s.df, s.aic, s.pr, s.t6, s.pl6)}>
															<Form.Item
																className={s.flex1}
																label="监测频率"
																labelAlign="left"
																labelCol={{ span: 8, offset: 5 }}
																wrapperCol={{ span: 16 }}
																name={['security_event_settings', 'interval']}
															>
																<CollectFrequency
																	disabled={
																		!getFieldValue('security_event_settings')
																			.enable
																	}
																	maxFreq={pathOr(
																		0,
																		[
																			'balance',
																			'securityEventMaxFreq',
																			'total',
																		],
																		resD
																	)}
																	numbers={FREQUENCY_NUMBERS}
																	unitMap={FREQUENCY_UNIT_MAP}
																/>
															</Form.Item>
														</div>
													)
												}
											</Form.Item>
										</div>
									</Form.Item>
									<Form.Item
										labelCol={{ span: 0 }}
										wrapperCol={{ span: 24, offset: 4 }}
									>
										<div className={cn(s.df, s.aic)}>
											<Form.Item noStyle shouldUpdate>
												{({ getFieldValue }) => {
													// 是否可选
													const enableType =
														getFieldValue('trigger_type') === 'manual'
															? pathOr(
																	0,
																	['feature', 'contentManualTask'],
																	resD
															  ) &&
															  pathOr(
																	0,
																	['balance', 'contentManualTask', 'total'],
																	resD
															  ) -
																	pathOr(
																		0,
																		['balance', 'contentManualTask', 'used'],
																		resD
																	) >
																	0
															: pathOr(0, ['feature', 'contentTask'], resD);
													return (
														<Form.Item
															labelAlign="left"
															labelCol={{ span: 0 }}
															wrapperCol={{ span: 24 }}
															valuePropName="checked"
															name={['content_settings', 'enable']}
														>
															{enableType ? (
																<Checkbox>内容违规监测</Checkbox>
															) : (
																<Tooltip
																	overlay="请先升级套餐服务"
																	placement="top"
																>
																	<span>
																		<Checkbox disabled>内容违规监测</Checkbox>
																	</span>
																</Tooltip>
															)}
														</Form.Item>
													);
												}}
											</Form.Item>
											<Form.Item noStyle shouldUpdate>
												{({ getFieldValue }) =>
													getFieldValue('trigger_type') === 'manual' ? (
														<div className={s.webTipsBox}>
															<svg
																t="1632473432354"
																className="icon"
																viewBox="0 0 1024 1024"
																version="1.1"
																xmlns="http://www.w3.org/2000/svg"
																p-id="2936"
																width="16"
																height="16"
															>
																<path
																	d="M512 64c247.04 0 448 200.96 448 448s-200.96 448-448 448S64 759.04 64 512 264.96 64 512 64z m0 64.277333C300.416 128.277333 128.298667 300.416 128.298667 512c0 211.541333 172.117333 383.701333 383.701333 383.701333 211.541333 0 383.701333-172.16 383.701333-383.701333 0-211.584-172.16-383.701333-383.701333-383.701333z m0 586.730667a48 48 0 1 1 0 96 48 48 0 0 1 0-96zM512 234.666667a32 32 0 0 1 32 32v341.333333a32 32 0 0 1-64 0v-341.333333A32 32 0 0 1 512 234.666667z"
																	p-id="2937"
																	fill="#ffad41"
																></path>
															</svg>
															每月
															{pathOr(
																0,
																['balance', 'contentManualTask', 'total'],
																resD
															)}
															次，当月剩余
															{pathOr(
																0,
																['balance', 'contentManualTask', 'total'],
																resD
															) -
																pathOr(
																	0,
																	['balance', 'contentManualTask', 'used'],
																	resD
																) || 0}
															次
														</div>
													) : (
														<div className={cn(s.df, s.aic, s.pr, s.t6, s.pl6)}>
															<Form.Item
																className={s.flex1}
																label="监测频率"
																labelAlign="left"
																labelCol={{ span: 8, offset: 5 }}
																wrapperCol={{ span: 16 }}
																name={['content_settings', 'interval']}
															>
																<CollectFrequency
																	disabled={
																		!getFieldValue('content_settings').enable
																	}
																	maxFreq={pathOr(
																		0,
																		['balance', 'contentMaxFreq', 'total'],
																		resD
																	)}
																	numbers={FREQUENCY_NUMBERS}
																	unitMap={WEAKNESS_FREQUENCY_UNIT_MAP}
																/>
															</Form.Item>
														</div>
													)
												}
											</Form.Item>
										</div>
									</Form.Item>
								</div>
							)}

							{assetType === 'host' && showInterval && (
								<div className={s.hostCollect}>
									<Form.Item label="监测频率" name="interval">
										<CollectFrequency maxFreq={maxFreq} />
									</Form.Item>
								</div>
							)}

							{assetType === 'aviliable' && (
								<Form.Item
									noStyle
									shouldUpdate={(pre, cur) => pre.job_ids !== cur.job_ids}
								>
									{({ getFieldValue }) => {
										const max =
											resD?.balance[
												`${getFieldValue('task_type').toLowerCase()}MaxTask`
											];
										return (
											<>
												<Form.Item
													label="监测目标"
													required
													name={['task_settings', 'task_list']}
												>
													<div>
														您可以添加
														<span style={{ color: '#0b73da' }}>
															{max.total}
														</span>
														个
														{getFieldValue('task_type') === 'http'
															? 'HTTP'
															: 'Ping'}
														任务，当前您还可添加
														<span style={{ color: '#0b73da' }}>
															{max.total - max.used < 0
																? 0
																: max.total - max.used}
														</span>
														个任务。
													</div>
												</Form.Item>
												<Form>
													<Table
														className={cn(s.w840, s.ml36, s.mb20, s.msgTable)}
														rowSelection={
															!atid
																? {
																		selectedRowKeys:
																			taskList.length > 0 && taskList[0].jobId
																				? selectedRowKeys
																				: [],
																		columnWidth: 50,
																		onChange: newSelectedRowKeys => {
																			if (
																				taskList.length > 0 &&
																				taskList[0].jobId
																			) {
																				form.current.setFieldsValue(
																					Object.assign(
																						{},
																						form?.current?.getFieldValue(),
																						{
																							selected_aviliable_task_list: newSelectedRowKeys,
																						}
																					)
																				);
																				setSelectedRowKeys(newSelectedRowKeys);
																			}
																		},
																  }
																: null
														}
														key={getFieldValue('task_type')}
														columns={columns({
															taskType: getFieldValue('task_type'),
														})}
														data={taskList}
														pro
													/>
												</Form>
											</>
										);
									}}
								</Form.Item>
							)}
						</div>
						{/* {step === 2 */}
						{/* web */}
						<div
							style={{
								display: step === 2 && assetType === 'web' ? 'block' : 'none',
							}}
						>
							{/* web 监测 */}
							<Form.Item
								noStyle
								shouldUpdate={(prevValues, curValues) =>
									prevValues.vul_settings.enable !==
									curValues.vul_settings.enable
								}
							>
								{({ getFieldValue }) => (
									<div className={cn(s.bdb, s.pb10, s.df, s.jcsb, s.aic)}>
										<div>
											<Label className={cn(s.label, s.dib, s.vam)}>
												Web漏洞监测
											</Label>
											<Helper
												className={cn(s.dib, s.vam, s.ml5)}
												placement="top"
												overlay="定期对Web站点进行漏洞扫描监测，发现漏洞并给出建议修复方案"
											/>
										</div>
										<Icon
											type={controlMap.vul}
											onClick={
												getFieldValue('vul_settings').enable
													? () => {
															setControlMap({
																...controlMap,
																vul: controlMap.vul === 'up' ? 'down' : 'up',
															});
													  }
													: null
											}
											className={cn(s.fs14, s.cp)}
										/>
									</div>
								)}
							</Form.Item>
							<div
								className={cn(s.m20_0, s.w876, s['content-' + controlMap.vul])}
							>
								<Form.Item
									noStyle
									shouldUpdate={(pre, cur) =>
										pre.trigger_type !== cur.trigger_type
									}
								>
									{({ getFieldValue }) =>
										getFieldValue('trigger_type') === 'schedule' && (
											<Form.Item
												label={<span>监测方式:</span>}
												labelCol={{ span: 24 }}
												labelAlign="left"
												wrapperCol={{ span: 24 }}
												name={['vul_settings', 'collect', 'type']}
											>
												<Radio.Group>
													<Radio box value="increment" className={s.vam}>
														周期性增量
													</Radio>
													<Helper
														className={cn(s.dib, s.vam, s.ml8)}
														placement="top"
														overlay={
															<div className={s.w300}>
																对新增业务系统信息进行扫描监测，耗时较短，默认监测模式：高、中、低危；监测深度：3；监测最大URL数：1000。
															</div>
														}
													/>
													<Radio className={cn(s.ml24, s.vam)} box value="full">
														周期性全量
													</Radio>
													<Helper
														className={cn(s.dib, s.vam, s.ml8)}
														placement="top"
														overlay="对业务系统进行全面扫描监测，耗时较长，可自定义配置监测策略"
													/>
												</Radio.Group>
											</Form.Item>
										)
									}
								</Form.Item>
								<Form.Item noStyle className={s.mb0}>
									<Form.Item
										noStyle
										shouldUpdate={(pre, cur) =>
											pre.trigger_type !== cur.trigger_type
										}
									>
										{({ getFieldValue }) => {
											let radioGroup = (
												<Radio.Group>
													<Radio value="all" className={cn(s.h24, s.vam)}>
														所有漏洞类型
													</Radio>
													<Helper
														className={cn(s.dib, s.vam, s.ml_9)}
														placement="top"
														overlay={
															<div className={s.w300}>
																{Object.entries(VUL_TYPE_MAP)
																	.map(([value, label]) => label)
																	.join('、')}
																等类型。
															</div>
														}
													/>
													<Radio
														className={cn(s.ml24, s.vam, s.h24)}
														value="notAll"
													>
														自定义
													</Radio>
												</Radio.Group>
											);
											if (getFieldValue('trigger_type') === 'manual') {
												radioGroup = (
													<Radio.Group>
														<Radio value="type" className={cn(s.h24, s.vam)}>
															自定义漏洞类型
														</Radio>
														<Radio
															className={cn(s.ml24, s.vam, s.h24)}
															value="plugIn"
														>
															自定义漏洞插件
														</Radio>
													</Radio.Group>
												);
											}
											return (
												<Form.Item
													label="监测内容"
													labelAlign="left"
													labelCol={{ span: 2 }}
													wrapperCol={{ span: 22 }}
													name={['vul_settings', 'vulType']}
												>
													{radioGroup}
												</Form.Item>
											);
										}}
									</Form.Item>
									<Form.Item noStyle shouldUpdate>
										{({ getFieldValue }) => {
											if (getFieldValue('vul_settings').vulType !== 'all') {
												return (
													<Form.Item
														className={s.mt_20}
														label=""
														labelAlign="left"
														labelCol={{ span: 2 }}
														wrapperCol={{ span: 16, offset: 2 }}
														name={[
															'vul_settings',
															'collect',
															getFieldValue('vul_settings').vulType === 'plugIn'
																? 'vulns'
																: 'vul',
														]}
													>
														<Select
															className={s.w100p}
															multiple
															clearable
															searchable
															checkAll
															placeholder={
																getFieldValue('vul_settings').vulType ===
																'plugIn'
																	? '请选择漏洞插件'
																	: '请选择监测的漏洞类型'
															}
															option={
																getFieldValue('vul_settings').vulType ===
																'plugIn'
																	? vulnsList
																	: Object.entries(VUL_TYPE_MAP).map(
																			([value, label]) => {
																				return { label, value };
																			}
																	  )
															}
														/>
													</Form.Item>
												);
											}
										}}
									</Form.Item>
								</Form.Item>
								<Form.Item noStyle shouldUpdate>
									{({ getFieldValue }) =>
										getFieldValue('trigger_type') === 'schedule' &&
										getFieldValue('vul_settings').collect.type ===
											'increment' ? (
											<div className={cn(s.flex1, s.pr)}>
												<Form.Item
													label="网站画像监测引擎"
													labelAlign="left"
													labelCol={{ span: 4 }}
													wrapperCol={{ span: 4 }}
													name={[
														'vul_settings',
														'enableSitePortraitTriggerMonitor',
													]}
												>
													<Switch
														checkedValue={true}
														unCheckedValue={false}
														style={{ marginLeft: '-16px' }}
													/>
												</Form.Item>
												<Helper
													className={cn(s.depthTip, s.ru, s.l178)}
													placement="top"
													overlay="开启后将按照网站画像智能监测频率下发漏洞增量监测任务。"
												/>
											</div>
										) : (
											<div className={cn(s.df, s.aic, s.w700)}>
												{getFieldValue('vul_settings').collect.type ===
													'full' &&
													getFieldValue('vul_settings').vulType === 'all' && (
														<div className={cn(s.w260, s.pr, s.pr40)}>
															<Form.Item
																label="监测模式"
																labelAlign="left"
																labelCol={{ span: 8 }}
																wrapperCol={{ span: 16 }}
																name={['vul_settings', 'collect', 'speed']}
															>
																<Select
																	className={cn(s.w100p, s.pr, s.t_2)}
																	option={VUL_SETTING_OPTIONS.vulPattern.map(
																		({ label, value }) => {
																			return { label: label.toString(), value };
																		}
																	)}
																/>
															</Form.Item>
															<Helper
																className={cn(s.depthTip, s.r8)}
																placement="top"
																overlay="仅高危：高危Web漏洞插件检测；高、中、低危：全量Web漏洞插件检测"
															/>
														</div>
													)}
												<div
													className={cn(
														{
															[s.flex1]:
																getFieldValue('vul_settings').collect.type ===
																	'full' &&
																getFieldValue('vul_settings').vulType === 'all',
														},
														s.pr
													)}
													style={
														getFieldValue('vul_settings').collect.type ===
															'full' &&
														getFieldValue('vul_settings').vulType === 'all'
															? {}
															: { width: '220px' }
													}
												>
													<Form.Item
														label="监测深度"
														labelAlign="left"
														labelCol={{
															span: 8,
															offset:
																getFieldValue('vul_settings').collect.type ===
																	'full' &&
																getFieldValue('vul_settings').vulType === 'all'
																	? 1
																	: 0,
														}}
														wrapperCol={{ span: 10 }}
														name={['vul_settings', 'collect', 'depth']}
													>
														<Select
															className={cn(s.w100p, s.pr, s.t_2)}
															option={VUL_SETTING_OPTIONS.depthOptions.map(
																({ label, value }) => {
																	return { label: label.toString(), value };
																}
															)}
														/>
													</Form.Item>
													<Helper
														className={cn(s.depthTip, {
															[s.r15]:
																getFieldValue('vul_settings').collect.type ===
																	'full' &&
																getFieldValue('vul_settings').vulType === 'all',
														})}
														placement="top"
														overlay="从起始的URL开始进行扫描，对超过设置深度的页面不再监测。"
													/>
												</div>
												<div
													className={cn(
														{
															[s.flex1]:
																getFieldValue('vul_settings').collect.type ===
																	'full' &&
																getFieldValue('vul_settings').vulType === 'all',
														},
														s.pr
													)}
													style={
														getFieldValue('vul_settings').collect.type ===
															'full' &&
														getFieldValue('vul_settings').vulType === 'all'
															? {}
															: { width: '260px' }
													}
												>
													<Form.Item
														label="监测最大URL数"
														labelAlign="left"
														labelCol={{ span: 12, offset: 1 }}
														wrapperCol={{ span: 11 }}
														name={['vul_settings', 'collect', 'maxPage']}
													>
														<Select
															className={cn(s.w100p, s.pr, s.t_2)}
															option={VUL_SETTING_OPTIONS.maxPageOptions
																.slice(
																	0,
																	VUL_SETTING_OPTIONS.maxPageOptions.length - 1
																)
																.map(item => {
																	return {
																		label: item.toString(),
																		value: item,
																	};
																})}
														/>
													</Form.Item>
												</div>
											</div>
										)
									}
								</Form.Item>
							</div>
							{/* web 监测 */}
							{/* ssl 监测 */}
							<Form.Item
								noStyle
								shouldUpdate={(prevValues, curValues) =>
									prevValues.ssl_settings.enable !==
									curValues.ssl_settings.enable
								}
							>
								{({ getFieldValue }) => (
									<div className={cn(s.bdb, s.pb10, s.df, s.jcsb, s.aic)}>
										<div>
											<Label className={cn(s.label, s.dib, s.vam)}>
												SSL安全监测
											</Label>
											<Helper
												className={cn(s.dib, s.vam, s.ml5)}
												placement="top"
												overlay="根据监测配置进行周期性SSL风险监测，仅https资产支持SSL安全监测"
											/>
										</div>
										<Icon
											type={controlMap.ssl}
											onClick={
												getFieldValue('ssl_settings').enable
													? () => {
															setControlMap({
																...controlMap,
																ssl: controlMap.ssl === 'up' ? 'down' : 'up',
															});
													  }
													: null
											}
											className={cn(s.fs14, s.cp)}
										/>
									</div>
								)}
							</Form.Item>
							<div
								className={cn(s.m20_0, s.w876, s['content-' + controlMap.ssl])}
							>
								<Form.Item noStyle className={s.mb0}>
									<Form.Item
										label="监测内容"
										labelAlign="left"
										labelCol={{ span: 2 }}
										wrapperCol={{ span: 22 }}
										name={['ssl_settings', 'sslType']}
									>
										<Radio.Group>
											<Radio value="all" className={cn(s.h24, s.vam)}>
												所有威胁类型
											</Radio>
											<Helper
												className={cn(s.dib, s.vam, s.ml_9)}
												placement="top"
												overlay={
													<div>
														{Object.entries(SSL_CATEGORY_KEY_LABEL_MAP)
															.map(([value, label]) => label)
															.join('、')}
														等类型。
													</div>
												}
											/>
											<Radio
												className={cn(s.ml24, s.vam, s.h24)}
												value="notAll"
											>
												自定义
											</Radio>
										</Radio.Group>
									</Form.Item>
									<Form.Item noStyle shouldUpdate>
										{({ getFieldValue }) =>
											getFieldValue('ssl_settings').sslType === 'notAll' ? (
												<Form.Item
													className={s.mt_20}
													label=""
													labelAlign="left"
													labelCol={{ span: 2 }}
													wrapperCol={{ span: 16, offset: 2 }}
													name={['ssl_settings', 'collect', 'pluginCategories']}
												>
													<Select
														className={s.w100p}
														multiple
														clearable
														searchable
														checkAll
														placeholder="请选择您需要监测的SSL威胁类型"
														option={Object.entries(
															SSL_CATEGORY_KEY_LABEL_MAP
														).map(([value, label]) => {
															return { label, value };
														})}
													/>
												</Form.Item>
											) : null
										}
									</Form.Item>
								</Form.Item>
							</div>
							{/* ssl 监测 */}
							{/* 安全事件监测 */}
							<Form.Item
								noStyle
								shouldUpdate={(prevValues, curValues) =>
									prevValues.security_event_settings.enable !==
									curValues.security_event_settings.enable
								}
							>
								{({ getFieldValue }) => (
									<div className={cn(s.bdb, s.pb10, s.df, s.jcsb, s.aic)}>
										<Label className={cn(s.label, s.dib, s.vam)}>
											安全事件监测
										</Label>
										<Icon
											type={controlMap.asset}
											onClick={
												getFieldValue('security_event_settings').enable
													? () => {
															setControlMap({
																...controlMap,
																asset:
																	controlMap.asset === 'up' ? 'down' : 'up',
															});
													  }
													: null
											}
											className={cn(s.fs14, s.cp)}
										/>
									</div>
								)}
							</Form.Item>
							<div
								className={cn(
									s.m20_0,
									s.w876,
									s['content-' + controlMap.asset]
								)}
							>
								<Form.Item noStyle className={s.mb0}>
									<Form.Item
										label="监测内容"
										labelAlign="left"
										labelCol={{ span: 2 }}
										wrapperCol={{ span: 22 }}
										name={['security_event_settings', 'securityType']}
									>
										<Radio.Group>
											<Radio value="all" className={cn(s.h24, s.vam)}>
												所有事件类型
											</Radio>
											<Helper
												className={cn(s.dib, s.vam, s.ml_9)}
												placement="top"
												overlay={
													<div>
														{Object.entries(SECURITY_EVENT_TYPE_MAP)
															.map(([value, label]) => label)
															.join('、')}
														等类型。
													</div>
												}
											/>
											<Radio
												className={cn(s.ml24, s.vam, s.h24)}
												value="notAll"
											>
												自定义
											</Radio>
										</Radio.Group>
									</Form.Item>
									<Form.Item noStyle shouldUpdate>
										{({ getFieldValue }) =>
											getFieldValue('security_event_settings').securityType ===
											'notAll' ? (
												<Form.Item
													className={s.mt_20}
													label=""
													labelAlign="left"
													labelCol={{ span: 2 }}
													wrapperCol={{ span: 16, offset: 2 }}
													name={[
														'security_event_settings',
														'collect',
														'plugins',
													]}
												>
													<Select
														className={s.w100p}
														multiple
														clearable
														searchable
														checkAll
														placeholder="请选择您需要监测的安全事件类型"
														option={Object.entries(SECURITY_EVENT_TYPE_MAP).map(
															([value, label]) => {
																return { label, value };
															}
														)}
													/>
												</Form.Item>
											) : null
										}
									</Form.Item>
								</Form.Item>
								<div className={cn(s.df, s.aic, s.w450)}>
									<div className={cn(s.flex1, s.pr)}>
										<Form.Item
											label="监测深度"
											labelAlign="left"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 10 }}
											name={['security_event_settings', 'collect', 'depth']}
										>
											<Select
												className={cn(s.w100p, s.pr, s.t_2)}
												option={VUL_SETTING_OPTIONS.depthOptions.map(
													({ label, value }) => {
														return { label: label.toString(), value };
													}
												)}
											/>
										</Form.Item>
										<Helper
											className={cn(s.depthTip)}
											placement="top"
											overlay="从起始的URL开始进行扫描，对超过设置深度的页面不再监测。"
										/>
									</div>
									<div className={cn(s.flex1, s.pr)}>
										<Form.Item
											label="监测最大URL数"
											labelAlign="left"
											labelCol={{ span: 12 }}
											wrapperCol={{ span: 11 }}
											name={['security_event_settings', 'collect', 'maxPage']}
										>
											<Select
												className={cn(s.w100p, s.pr, s.t_2)}
												option={VUL_SETTING_OPTIONS.maxPageOptions
													.slice(
														0,
														VUL_SETTING_OPTIONS.maxPageOptions.length - 1
													)
													.map(item => {
														return { label: item.toString(), value: item };
													})}
											/>
										</Form.Item>
										<Helper
											className={cn(s.depthTip, s.r_20)}
											placement="top"
											overlay="爬虫抓取扫描的URL数量上限"
										/>
									</div>
								</div>
							</div>
							{/* 安全事件监测 */}
							{/* 内容违规监测 */}
							<Form.Item
								noStyle
								shouldUpdate={(prevValues, curValues) =>
									prevValues.content_settings.enable !==
									curValues.content_settings.enable
								}
							>
								{({ getFieldValue }) => (
									<div className={cn(s.bdb, s.pb10, s.df, s.jcsb, s.aic)}>
										<Label className={cn(s.label, s.dib, s.vam)}>
											内容违规监测
										</Label>
										<Icon
											type={controlMap.content}
											onClick={
												getFieldValue('content_settings').enable
													? () => {
															setControlMap({
																...controlMap,
																content:
																	controlMap.content === 'up' ? 'down' : 'up',
															});
													  }
													: null
											}
											className={cn(s.fs14, s.cp)}
										/>
									</div>
								)}
							</Form.Item>
							<div
								className={cn(
									s.m20_0,
									s.w876,
									s['content-' + controlMap.content]
								)}
							>
								<Form.Item
									label={<span>监测方式:</span>}
									labelCol={{ span: 24 }}
									labelAlign="left"
									wrapperCol={{ span: 24 }}
									name={['content_settings', 'type']}
								>
									<Radio.Group>
										<Radio box value="full" className={s.vam}>
											全量监测
										</Radio>
										<Helper
											className={cn(s.dib, s.vam, s.ml8)}
											placement="top"
											overlay={
												<div className={s.w300}>
													对业务系统进行全面扫描监测，耗时较长，可自定义配置监测策略。
												</div>
											}
										/>
										<Radio className={cn(s.ml24, s.vam)} box value="assign">
											指定页面监测
										</Radio>
										<Helper
											className={cn(s.dib, s.vam, s.ml8)}
											placement="top"
											overlay="支持对特定URL进行扫描监测。"
										/>
									</Radio.Group>
								</Form.Item>
								<div className={cn(s.df, s.aifs)}>
									<div className={cn(s.flex1, s.df, s.aifs)}>
										<Form.Item
											label="监测内容"
											labelAlign="left"
											labelCol={{ span: 12 }}
											wrapperCol={{ span: 12 }}
											valuePropName="checked"
											name={[
												'content_settings',
												'collect',
												'systemKeywordStatus',
											]}
										>
											<Checkbox>敏感词</Checkbox>
										</Form.Item>
										<Form.Item noStyle shouldUpdate>
											{({ getFieldValue }) => (
												<Form.Item
													className={s.flex1}
													label=""
													labelAlign="left"
													labelCol={{ span: 0 }}
													wrapperCol={{ span: 8, offset: 2 }}
													name={[
														'content_settings',
														'collect',
														'systemKeywordTypes',
													]}
												>
													<Select
														option={CONTENT_KEYWORD_TYPES.map(
															({ idx, label }) => {
																return { label, value: idx };
															}
														)}
														placeholder="请选择敏感词类型"
														disabled={
															!getFieldValue('content_settings').collect
																.systemKeywordStatus
														}
														className={cn(s.w260, {
															[s.noEvent]: !getFieldValue('content_settings')
																.collect.systemKeywordStatus,
														})}
														multiple
														clearable
													/>
												</Form.Item>
											)}
										</Form.Item>
									</div>
									<div className={cn(s.flex1, s.df, s.aifs)}>
										<Form.Item
											labelAlign="left"
											labelCol={{ span: 0 }}
											wrapperCol={{ span: 24 }}
											valuePropName="checked"
											name={[
												'content_settings',
												'collect',
												'privacyDisclosureStatus',
											]}
										>
											<Checkbox>隐私信息</Checkbox>
										</Form.Item>
										<Form.Item noStyle shouldUpdate>
											{({ getFieldValue }) => (
												<Form.Item
													className={s.flex1}
													label=""
													labelAlign="left"
													labelCol={{ span: 0 }}
													wrapperCol={{ span: 10, offset: 2 }}
													name={[
														'content_settings',
														'collect',
														'privacyDisclosureTypes',
													]}
												>
													<Select
														option={CONTENT_PRIVACY_DISCLOSURE_TYPES.map(
															({ idx, label }) => {
																return { label, value: idx };
															}
														)}
														placeholder="请选择隐私信息类型"
														disabled={
															!getFieldValue('content_settings').collect
																.privacyDisclosureStatus
														}
														className={cn({
															[s.noEvent]: !getFieldValue('content_settings')
																.collect.privacyDisclosureStatus,
														})}
														multiple
														clearable
													/>
												</Form.Item>
											)}
										</Form.Item>
									</div>
								</div>
								<Form.Item noStyle shouldUpdate>
									{({ getFieldValue }) =>
										getFieldValue('content_settings').type === 'assign' ? (
											<div className={cn(s.pr)}>
												<Form.Item
													className={cn(s.mt10)}
													label=""
													labelAlign="left"
													labelCol={{ span: 0 }}
													wrapperCol={{ span: 20, offset: 2 }}
													name={['content_settings', 'collect', 'includeUrl']}
												>
													<Textarea
														placeholder="请输入监测URL关键参数，一行一个。"
														rows="4"
													></Textarea>
												</Form.Item>
												<Helper
													className={cn(s.pa, s.contentUrlIcon)}
													placement="top"
													overlay="请输入监测URL关键参数，一行一个。如您需要监测地址是‘http://www.scanv.com/admin/’,可在此输入‘/admin/’即可。若仅监测首页，填写‘/’即可。"
												/>
											</div>
										) : (
											<div className={cn(s.df, s.aic, s.w450)}>
												<div className={cn(s.flex1, s.pr)}>
													<Form.Item
														label="监测深度"
														labelAlign="left"
														labelCol={{ span: 8 }}
														wrapperCol={{ span: 10 }}
														name={['content_settings', 'collect', 'depth']}
													>
														<Select
															className={cn(s.w100p, s.pr, s.t_2)}
															option={VUL_SETTING_OPTIONS.depthOptions.map(
																({ label, value }) => {
																	return { label: label.toString(), value };
																}
															)}
														/>
													</Form.Item>
													<Helper
														className={cn(s.depthTip)}
														placement="top"
														overlay="从起始的URL开始进行扫描，对超过设置深度的页面不再监测。"
													/>
												</div>
												<div className={cn(s.flex1, s.pr)}>
													<Form.Item
														label="监测最大URL数"
														labelAlign="left"
														labelCol={{ span: 12 }}
														wrapperCol={{ span: 10 }}
														name={['content_settings', 'collect', 'maxPage']}
													>
														<Select
															className={cn(s.w100p, s.pr, s.t_2)}
															option={VUL_SETTING_OPTIONS.maxPageOptions
																.slice(
																	0,
																	VUL_SETTING_OPTIONS.maxPageOptions.length - 4
																)
																.map(item => {
																	return {
																		label: item.toString(),
																		value: item,
																	};
																})}
														/>
													</Form.Item>
													<Helper
														className={cn(s.depthTip, s.r_10)}
														placement="top"
														overlay="爬虫抓取扫描的URL数量上限"
													/>
												</div>
											</div>
										)
									}
								</Form.Item>
							</div>
						</div>
						{/* host */}
						<div
							style={{
								display: step === 2 && assetType === 'host' ? 'block' : 'none',
							}}
						>
							<div className={cn(s.bdb, s.pb10)}>
								<Label className={cn(s.label, s.dib, s.vam)}>
									主机安全监测
								</Label>
								<Helper
									className={cn(s.dib, s.vam, s.ml8)}
									placement="top"
									overlay={
										<>
											<div>
												若同时关闭扫描TCP端口与扫描UDP端口，系统将默认扫描TCP端口。
											</div>
											<div>
												开启扫描UDP端口会增加端口扫描时长，建议只开启扫描TCP端口。
											</div>
										</>
									}
								/>
							</div>
							<div className={cn(s.mb0, s.mt20)}>
								{/* <Form.Item labelCol={{span: 3}} wrapperCol={{span: 21}} label='启用登录扫描' name={['hostSettings', 'collect', 'tcp']} valuePropName='checked'>
									<Switch pro />
								</Form.Item>
								<Form.Item wrapperCol={{span: 24}} label='' name={['hostSettings', 'collect', 'loginData']} valuePropName='checked' valuePropName='data'>
									<Table columns={hostColumns} />
								</Form.Item>
								<Form.Item
									labelCol={{ span: 3 }}
									wrapperCol={{ span: 21 }}
									label="漏洞检测模板"
									name={['hostSettings', 'network_scan_profile']}
								>
									<Select
										option={[
											{ label: '高危漏洞', value: '3' },
											{ label: '中危漏洞', value: '2' },
											{ label: '低危漏洞', value: '1' },
											{ label: '全量漏洞', value: '0' },
										]}
									/>
								</Form.Item> */}
								{/* <Form.Item labelCol={{span: 3}} wrapperCol={{span: 21}} label='检测优先级' name={['hostSettings', 'collect', 'level']}>
									<Select option={['高', '中', '低'].map(i => { return {label: i, value: i}})} />
								</Form.Item> */}
								<Form.Item
									labelCol={{ span: 3 }}
									wrapperCol={{ span: 21 }}
									label="操作系统识别"
									name={['hostSettings', 'is_detect_os_enabled']}
								>
									<Switch checkedValue={true} unCheckedValue={false} />
								</Form.Item>
								<Form.Item
									labelAlign="left"
									labelCol={{ span: 3 }}
									wrapperCol={{ span: 21 }}
									className={s.tRight}
									label="扫描TCP端口"
									name={['hostSettings', 'is_tcp_enabled']}
								>
									<Switch checkedValue={true} unCheckedValue={false} />
								</Form.Item>
								<Form.Item
									className={s.tRight}
									labelAlign="left"
									labelCol={{ span: 3 }}
									wrapperCol={{ span: 21 }}
									label="扫描UDP端口"
									name={['hostSettings', 'is_udp_enabled']}
								>
									<Switch checkedValue={true} unCheckedValue={false} />
								</Form.Item>
								{/* <Form.Item
									labelCol={{ span: 3 }}
									wrapperCol={{ span: 21 }}
									label="探测端口"
									name={['hostSettings', 'is_detect_port_enabled']}
									valuePropName="checked"
								>
									<Switch pro />
								</Form.Item> */}
							</div>
							{/* <div className={cn(s.bdb, s.pb10)}>
								<Label className={cn(s.label, s.dib, s.vam)}>
									主机存活测试
								</Label>

							</div>
							<div className={cn(s.m20_0)}>

							</div> */}
						</div>
						{/* aviliable */}
						<div
							style={{
								display:
									step === 2 && assetType === 'aviliable' ? 'block' : 'none',
							}}
						>
							<div
								className={cn(s.bdb, s.pb10, s.df, s.jcsb, s.aic, s.cp)}
								onClick={() => {
									setControlMap({
										...controlMap,
										[taskType]: controlMap[taskType] === 'up' ? 'down' : 'up',
									});
								}}
							>
								<Label className={cn(s.label, s.dib, s.vam)}>
									{taskType === 'http' ? 'HTTP' : 'Ping'}监测
								</Label>
								<Icon
									type={controlMap[taskType]}
									className={cn(s.fs14, s.cp)}
								/>
							</div>
							<div
								className={cn(
									s.m20_0,
									s.w876,
									s['content-' + controlMap[taskType]]
								)}
							>
								<Form.Item
									label="监测节点"
									labelCol={{ span: 3 }}
									labelAlign="left"
									wrapperCol={{ span: 16 }}
									name={['task_settings', 'collect', 'area']}
								>
									<div className={cn(s.df, s.aic, s.jcsb, s.lh32)}>
										<span>IPv4节点</span>
										<a
											className={s.mark}
											target="_blank"
											rel="noopener noreferrer"
											href="http://help.yunaq.com/faq/943/index.html"
										>
											监控点IP？
										</a>
									</div>
									<Form.Item
										label=""
										noStyle
										labelCol={{ span: 0 }}
										labelAlign="left"
										wrapperCol={{ span: 34 }}
										name={['task_settings', 'collect', 'area']}
									>
										<Select
											className={s.w100p}
											multiple
											clearable
											searchable
											checkAll
											placeholder="请选择监测节点，若IPv6的地址配置IPv4节点，监测结果将异常。"
											option={aviliableNode?.v4_area.reduce((t, i) => {
												const item = cloneDeep(i);
												if (item.enable) {
													delete item.enable;
													t.push({
														label: item[Object.keys(item)[0]],
														value: Object.keys(item)[0],
													});
												}
												return t;
											}, [])}
										/>
									</Form.Item>
									<div className={cn(s.lh32)}>IPv6节点</div>
									<Form.Item
										label=""
										noStyle
										labelCol={{ span: 0 }}
										labelAlign="left"
										wrapperCol={{ span: 34 }}
										name={['task_settings', 'collect', 'area_ipv6']}
									>
										<Select
											className={s.w100p}
											multiple
											clearable
											searchable
											checkAll
											placeholder="请选择监测节点，若IPv4的地址配置IPv6节点，监测结果将异常。"
											option={aviliableNode?.v6_area.reduce((t, i) => {
												const item = cloneDeep(i);
												if (item.enable) {
													delete item.enable;
													t.push({
														label: item[Object.keys(item)[0]],
														value: Object.keys(item)[0],
													});
												}
												return t;
											}, [])}
										/>
									</Form.Item>
								</Form.Item>
								<Form.Item
									noStyle
									shouldUpdate={(pre, cur) => pre.task_type !== cur.task_type}
								>
									{({ getFieldValue }) =>
										getFieldValue('task_type') === 'http' && (
											<>
												<Form.Item
													label="请求方法"
													labelCol={{ span: 3 }}
													labelAlign="left"
													wrapperCol={{ span: 16 }}
													name={['task_settings', 'collect', 'method']}
												>
													<Radio.Group>
														{['HEAD', 'GET', 'POST', 'PUT'].map(i => {
															return (
																<Radio
																	box
																	value={i.toLowerCase()}
																	className={cn(s.mr16, s.br4)}
																>
																	{i}
																</Radio>
															);
														})}
													</Radio.Group>
												</Form.Item>
												<Form.Item
													label="请求头信息"
													labelCol={{ span: 3 }}
													labelAlign="left"
													wrapperCol={{ span: 16 }}
													name={['task_settings', 'collect', 'header']}
												>
													<Textarea
														rows="4"
														placeholder="您可以自定义HTTP请求头信息，格式为：Name:Value，多个项用换行分隔。若不填默认会添加 UA 项请求头：user-agent:Mozilla/5.0(compatible; YunaqMonitor;+http://www.yunaq.com/help/56c54b80eb5fcf6c9d203b37/)"
													></Textarea>
												</Form.Item>
												<Form.Item
													noStyle
													shouldUpdate={(pre, cur) =>
														pre.task_settings.collect.method !==
														cur.task_settings.collect.method
													}
												>
													{({ getFieldValue }) =>
														['post', 'put'].includes(
															getFieldValue('task_settings').collect.method
														) && (
															<Form.Item
																label="提交内容"
																labelCol={{ span: 3 }}
																labelAlign="left"
																wrapperCol={{ span: 16 }}
																name={['task_settings', 'collect', 'payload']}
															>
																<Textarea
																	rows="4"
																	placeholder={`对于${getFieldValue(
																		'task_settings'
																	).collect.method.toUpperCase()}请求方法，你可以指定提交的参数列表。例：channel=sports&type=football`}
																></Textarea>
															</Form.Item>
														)
													}
												</Form.Item>
												<Form.Item
													label="重定向次数"
													labelCol={{ span: 3 }}
													labelAlign="left"
													wrapperCol={{ span: 16 }}
													name={['task_settings', 'collect', 'redirect']}
												>
													<div className={cn(s.df, s.aic, s.pr, s.t_2)}>
														<span>最多允许页面跳转</span>
														<Form.Item
															labelCol={{ span: 0 }}
															labelAlign="left"
															noStyle
															wrapperCol={{ span: 16 }}
															name={['task_settings', 'collect', 'redirect']}
														>
															<Select
																className={cn(s.w100, s.m0_10)}
																option={Array.from(Array(11)).map((i, k) => {
																	return {
																		label: k.toString(),
																		value: k.toString(),
																	};
																})}
															/>
														</Form.Item>
														<span>次</span>
													</div>
												</Form.Item>
											</>
										)
									}
								</Form.Item>
							</div>
							<div
								className={cn(s.bdb, s.pb10, s.df, s.jcsb, s.aic, s.cp)}
								onClick={() => {
									setControlMap({
										...controlMap,
										alert: controlMap.alert === 'up' ? 'down' : 'up',
									});
								}}
							>
								<Label className={cn(s.label, s.dib, s.vam)}>告警策略</Label>
								<Icon type={controlMap.alert} className={cn(s.fs14, s.cp)} />
							</div>
							<div
								className={cn(
									s.m20_0,
									s.w876,
									s['content-' + controlMap.alert]
								)}
							>
											<Form.Item
									label="异常条件"
									labelCol={{ span: 3 }}
									labelAlign="left"
									wrapperCol={{ span: 16 }}
									rules={[{ required: true, validator: validatormap }]}
									name={['task_settings', 'alert', 'respTime']}
								>
									<div className={cn(s.df, s.aic, s.pr, s.t_2)}>
										<span>响应时间大于等于</span>
										<Form.Item
											labelCol={{ span: 0 }}
											labelAlign="left"
											noStyle
											wrapperCol={{ span: 16 }}
											name={['task_settings', 'alert', 'respTime']}
										>
											<Input className={cn(s.w100, s.m0_10)} />
										</Form.Item>
										<span>ms</span>
									</div>
									<Form.Item
										noStyle
										shouldUpdate={(pre, cur) => pre.task_type !== cur.task_type}
									>
										{({ getFieldValue }) =>
											getFieldValue('task_type') === 'ping' ? (
												<div className={cn(s.df, s.aic, s.mt24)}>
													<span>或丢包率大于等于</span>
													<Form.Item
														labelCol={{ span: 0 }}
														labelAlign="left"
														noStyle
														wrapperCol={{ span: 16 }}
														name={['task_settings', 'alert', 'lossRate']}
													>
														<Input className={cn(s.w100, s.m0_10)} />
													</Form.Item>
													<span>%时告警</span>
												</div>
											) : (
												<div className={cn(s.df, s.aic, s.mt24)}>
													<span>状态码范围</span>
													<Form.Item
														labelCol={{ span: 0 }}
														labelAlign="left"
														noStyle
														wrapperCol={{ span: 16 }}
														name={['task_settings', 'alert', 'statusCodeRange']}
													>
														<Input
															placeholder="多个范围用空格分隔，范围起始用~分隔，如：403 500~504。"
															className={cn(s.w170, s.m0_10)}
														/>
													</Form.Item>
												</div>
											)
										}
									</Form.Item>
								</Form.Item>
								<Form.Item
									label="告警节点数"
									labelCol={{ span: 3 }}
									labelAlign="left"
									rules={[{ required: true, validator: validatormap }]}
									wrapperCol={{ span: 16 }}
									name={['task_settings', 'alert', 'nodeCount']}
								>
									<div className={cn(s.df, s.aic)}>
										<span>节点异常大于等于</span>
										<Form.Item
											labelCol={{ span: 0 }}
											labelAlign="left"
											noStyle
											wrapperCol={{ span: 16 }}
											name={['task_settings', 'alert', 'nodeCount']}
										>
											<InputNumber className={s.m0_10} min={0} />
										</Form.Item>
										<span>个时告警</span>
									</div>
								</Form.Item>
								<Form.Item
									label="告警次数"
									labelCol={{ span: 3 }}
									labelAlign="left"
									rules={[{ required: true, validator: validatormap }]}
									wrapperCol={{ span: 16 }}
									name={['task_settings', 'alert', 'alertCount']}
								>
									<div className={cn(s.df, s.aic)}>
										<span>每次异常或故障最多告警</span>
										<Form.Item
											labelCol={{ span: 0 }}
											labelAlign="left"
											noStyle
											wrapperCol={{ span: 16 }}
											name={['task_settings', 'alert', 'alertCount']}
										>
											<Select
												className={cn(s.w85, s.m0_10)}
												option={Array.from(Array(5)).map((i, k) => {
													return {
														label: (k + 1).toString(),
														value: (k + 1).toString(),
													};
												})}
											/>
										</Form.Item>
										<span>次</span>
									</div>
								</Form.Item>
							</div>
						</div>
						{/* web 高级设置 */}
						<div
							style={{
								display: step === 3 && assetType === 'web' ? 'block' : 'none',
							}}
						>
							<div className={cn(s.pb10)}>
								<Label className={cn(s.label, s.dib, s.vam, s.df, s.aic)}>
									高级设置
									{formData.job_ids.length > 1 && (
										<span className={cn(s.warningColor, s.ml10, s.fwn)}>
											高级配置不支持针对多个资产进行批量设置，若您的资产需要进行高级配置，请单独下发监测任务。
										</span>
									)}
								</Label>
							</div>
							<div
								onClick={() => {
									setControlMap({
										...controlMap,
										login: controlMap.login === 'up' ? 'down' : 'up',
									});
								}}
								className={cn(
									s.subLabel,
									s.borderLrb,
									s.bdt,
									s.brtr,
									s.df,
									s.aic,
									s.jcsb,
									s.cp
								)}
							>
								<div>预登录</div>
								<div>
									配置
									<Icon
										type={controlMap.login}
										className={cn(s.fs12, s.ml10, s.cp)}
									/>
								</div>
							</div>
							<div
								className={cn(
									s.p20_0,
									s.borderLrb,
									s.bsbb,
									s['content-' + controlMap.login]
								)}
							>
								<Form.Item
									labelCol={{ span: 3 }}
									wrapperCol={{ span: 21 }}
									label="网站登录"
									name={['prelogin', 'site_login']}
								>
									<Switch
										checkedValue={true}
										unCheckedValue={false}
										disabled={formData.job_ids.length > 1}
									/>
								</Form.Item>
								<Form.Item noStyle shouldUpdate>
									{({ getFieldValue }) =>
										getFieldValue('prelogin').site_login ? (
											<>
												<Form.Item
													label="登录方式"
													labelCol={{ span: 5 }}
													wrapperCol={{ span: 18 }}
													name={['prelogin', 'login_method']}
												>
													<Radio.Group>
														<Radio className={s.h24} value={'form'}>
															表单登录
														</Radio>
														<Radio className={cn(s.ml24, s.h24)} value={'json'}>
															JSON登录
														</Radio>
														<Radio
															className={cn(s.ml24, s.h24)}
															value={'cookie'}
														>
															Cookie
															<Helper
																className={cn(s.dib, s.vam, s.ml8)}
																placement="top"
																overlay="通过配置Cookie可实现对当前站点需要身份认证请求的检测，一般建议提供管理员的Cookie信息。"
															/>
														</Radio>
														<Radio
															className={cn(s.ml24, s.h24)}
															value={'headers'}
														>
															Headers
															<Helper
																className={cn(s.dib, s.vam, s.ml8)}
																placement="top"
																overlay="通过已经登录网站后得到的Headers来检测网站，设置用户的Headers就对用户权限能访问到的网页进行检测，一般设置管理员用户的Headers。"
															/>
														</Radio>
													</Radio.Group>
												</Form.Item>
												<Form.Item noStyle shouldUpdate>
													{({ getFieldValue }) =>
														getFieldValue('prelogin').login_method === 'form' ||
														getFieldValue('prelogin').login_method ===
															'json' ? (
															<>
																<Form.Item
																	label={
																		<span>
																			登录URL
																			<Helper
																				className={s.ml8}
																				placement="top"
																				overlay="请填写登录页面的URL,例如：http://example.com/login"
																			></Helper>
																		</span>
																	}
																	required
																	rules={[
																		{
																			required: true,
																			message: '请输入登录URL',
																		},
																	]}
																	labelCol={{ span: 5 }}
																	wrapperCol={{ span: 18 }}
																	name={[
																		'prelogin',
																		`login_${
																			getFieldValue('prelogin').login_method
																		}_action_url`,
																	]}
																>
																	<Input placeholder="请输入登录URL"></Input>
																</Form.Item>
																<Form.Item
																	label={
																		<span>
																			POST认证参数
																			<Helper
																				className={s.ml8}
																				placement="top"
																				overlay={
																					getFieldValue('prelogin')
																						.login_method === 'json'
																						? '请填写JSON格式:{"u":"admin","p":"qqq"}'
																						: `请按照以下格式填写:u=user&p=passwd`
																				}
																			></Helper>
																		</span>
																	}
																	required
																	rules={[
																		{
																			required: true,
																			message: '请输入POST认证参数',
																		},
																	]}
																	labelCol={{ span: 5 }}
																	wrapperCol={{ span: 18 }}
																	name={['prelogin', 'login_form_postdata']}
																>
																	{getFieldValue('prelogin').login_method ===
																	'json' ? (
																		<Textarea
																			rows="4"
																			placeholder={`{"u":"admin","p":"ABCabc123"}`}
																		></Textarea>
																	) : (
																		<Textarea rows="4" placeholder="请输入认证参数"></Textarea>
																	)}
																</Form.Item>
															</>
														) : getFieldValue('prelogin').login_method ===
														  'cookie' ? (
															<>
																<Form.Item
																	label="Cookie"
																	required
																	rules={[
																		{
																			required: true,
																			message: '请输入登录Cookie',
																		},
																	]}
																	labelCol={{ span: 5 }}
																	wrapperCol={{ span: 18 }}
																	name={['prelogin', 'request_cookie']}
																>
																	<Textarea
																		rows="4"
																		placeholder="例如：_example=afsdfafwefa180b;_example2=BSDF234DFAS598;"
																	></Textarea>
																</Form.Item>
															</>
														) : (
															<>
																<Form.Item
																	label="headers"
																	required
																	rules={[
																		{
																			required: true,
																			message: '请输入登录headers',
																		},
																	]}
																	labelCol={{ span: 5 }}
																	wrapperCol={{ span: 18 }}
																	name={['prelogin', 'request_http_headers']}
																>
																	<Textarea
																		rows="4"
																		placeholder="每一行输入一组key和value。例如:&#13;&#10;Acceot: */*&#13;&#10;Accept-Encoding: gzip,deflate,br&#13;&#10;Host: localhost:3000"
																	></Textarea>
																</Form.Item>
															</>
														)
													}
												</Form.Item>
											</>
										) : null
									}
								</Form.Item>
								<Form.Item
									labelCol={{ span: 3 }}
									wrapperCol={{ span: 21 }}
									label="HTTP认证"
									name={['prelogin', 'is_http_auth_enabled']}
								>
									<Switch
										checkedValue={true}
										unCheckedValue={false}
										disabled={formData.job_ids.length > 1}
									/>
								</Form.Item>
								<Form.Item noStyle shouldUpdate>
									{({ getFieldValue }) =>
										getFieldValue('prelogin').is_http_auth_enabled ? (
											<>
												<div className={s.text}>支持BASIC、Digest</div>
												<Form.Item
													labelCol={{ span: 4 }}
													wrapperCol={{ span: 18 }}
													label="用户名"
													name={['prelogin', 'http_auth_username']}
													required
													rules={[{ required: true, message: '请输入用户名' }]}
												>
													<Input placeholder="请输入用户名" />
												</Form.Item>
												<Form.Item
													labelCol={{ span: 4 }}
													wrapperCol={{ span: 18 }}
													label="密码"
													name={['prelogin', 'http_auth_password']}
													required
													rules={[{ required: true, message: '请输入密码' }]}
												>
													<Input placeholder="请输入密码" />
												</Form.Item>
											</>
										) : null
									}
								</Form.Item>
								<Form.Item
									labelCol={{ span: 3 }}
									wrapperCol={{ span: 21 }}
									label="代理服务器"
									name={['prelogin', 'is_proxy_enabled']}
								>
									<Switch
										checkedValue={true}
										unCheckedValue={false}
										disabled={formData.job_ids.length > 1}
									/>
								</Form.Item>
								<Form.Item noStyle shouldUpdate>
									{({ getFieldValue }) =>
										getFieldValue('prelogin').is_proxy_enabled ? (
											<>
												<Form.Item
													labelCol={{ span: 4 }}
													wrapperCol={{ span: 18 }}
													label="协议"
													name={['prelogin', 'proxy_scheme']}
													required
													rules={[{ required: true, message: '请输入协议' }]}
												>
													<Input disabled placeholder="请输入协议" />
												</Form.Item>
												<Form.Item
													labelCol={{ span: 4 }}
													wrapperCol={{ span: 18 }}
													label="IP"
													name={['prelogin', 'proxy_host']}
													required
													rules={[{ required: true, message: '请输入IP' }]}
												>
													<Input placeholder="请输入IP" />
												</Form.Item>
												<Form.Item
													labelCol={{ span: 4 }}
													wrapperCol={{ span: 18 }}
													label="端口"
													name={['prelogin', 'proxy_port']}
													required
													rules={[{ required: true, message: '请输入端口' }]}
												>
													<InputNumber
														className={s.w100p}
														placeholder="请输入端口"
													/>
												</Form.Item>
												<Form.Item
													labelCol={{ span: 4 }}
													wrapperCol={{ span: 18 }}
													label="用户名"
													name={['prelogin', 'proxy_username']}
												>
													<Input placeholder="请输入用户名" />
												</Form.Item>
												<Form.Item
													labelCol={{ span: 4 }}
													wrapperCol={{ span: 18 }}
													label="密码"
													name={['prelogin', 'proxy_password']}
												>
													<Input placeholder="请输入密码" />
												</Form.Item>
											</>
										) : null
									}
								</Form.Item>
							</div>
							<div
								onClick={() => {
									setControlMap({
										...controlMap,
										custom: controlMap.custom === 'up' ? 'down' : 'up',
									});
								}}
								className={cn(
									s.subLabel,
									s.borderLrb,
									s.df,
									s.aic,
									s.jcsb,
									s.cp
								)}
							>
								<div>
									自定义监测页面
									<Helper
										className={cn(s.dib, s.vam, s.ml8)}
										placement="top"
										overlay="通过自定义设置额外监测入口页面及不需监测的页面，扫描监测范围更准更全面。"
									/>
								</div>
								<div>
									配置
									<Icon
										type={controlMap.custom}
										className={cn(s.fs12, s.ml10, s.cp)}
									/>
								</div>
							</div>
							<div
								className={cn(
									s.p20_0,
									s.mb20,
									s.bdb,
									s.borderLrb,
									s.bdc,
									s.brbl,
									s.bsbb,
									s['content-' + controlMap.custom]
								)}
							>
								<div className={cn(s.pr, s.pr20)}>
									<Form.Item
										label="需额外监测页面入口"
										labelCol={{ span: 5 }}
										wrapperCol={{ span: 18 }}
										name={['custom_monitor_page', 'includeUrl']}
									>
										<Textarea
											pro
											rows="4"
											id={s.textareaDis}
											disabled={formData.job_ids.length > 1}
											placeholder="请输入需额外监测URL入口的关键参数，一行一个"
										></Textarea>
									</Form.Item>
									<Helper
										className={cn(s.depthTip, s.hCenter)}
										placement="top"
										overlay={
											<div style={{ width: '240px' }}>
												如您需要监测地址入口是'https://www.scanv.com/admin/'，可在此输入'/admin/'即可。
											</div>
										}
									/>
								</div>
								<div className={cn(s.pr, s.pr20)}>
									<Form.Item
										label="不需监测页面"
										labelCol={{ span: 5 }}
										wrapperCol={{ span: 18 }}
										name={['custom_monitor_page', 'excludeUrl']}
									>
										<Textarea
											rows="4"
											id={s.textareaDis}
											disabled={formData.job_ids.length > 1}
											placeholder="请输入不需监测URL的关键参数，一行一个"
										></Textarea>
									</Form.Item>
									<Helper
										className={cn(s.depthTip, s.hCenter)}
										placement="top"
										overlay={
											<div style={{ width: '240px' }}>
												系统自动过滤监测匹配到参数的URL，如您不需要监测地址是'https://www.scanv.com/admin/'，可在此输入'/admin/'即可。
											</div>
										}
									/>
								</div>
							</div>
						</div>
					</Form>
				</div>
				<div className={s.btnBox}>
					{step === 1 && (
						<Button
							onClick={() => {
								window.history.back();
							}}
						>
							取消
						</Button>
					)}
					{step > 1 && (
						<Button
							className={s.lineBtn}
							onClick={() => {
								setStep(step - 1);
							}}
						>
							上一步
						</Button>
					)}
					{((step < 3 && assetType === 'web') ||
						(step < 2 &&
							(assetType === 'host' || assetType === 'aviliable'))) && (
						<Button
							className={cn(s.lineBtn, s.ml24)}
							onClick={() => {
								nextStep();
							}}
						>
							下一步
						</Button>
					)}
					<Button
						type="primary"
						className={s.ml24}
						onClick={
							assetType === 'web'
								? () => showRes()
								: assetType === 'aviliable'
								? () => aviliableSubmit()
								: () => submitForm()
						}
					>
						{typeText[2]}
					</Button>
				</div>
			</div>
			<Dialog
				visible={taskInfoDialog}
				onhide={() => {
					setIsOnSubmit(false);
					setTaskInfoDialog(false);
				}}
				onsubmit={() =>
					assetType === 'web' ? showRes(true) : aviliableSubmit(true)
				}
				title="监测配置"
				confirmText={
					<Button type="primary" disabled={isOnSubmit}>
						{atid ? '保存' : '下发任务'}
					</Button>
				}
				className={cn(s.w720, s.t5vh, s.submitDialog)}
			>
				<div className={cn(s.p20, s.mh65p, s.ofa)}>
					{assetType !== 'aviliable' ? (
						<>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>任务名称</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									{formData.name}
								</div>
							</div>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>资产名称</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									{jobList
										.reduce((total, item) => {
											if (formData.job_ids.indexOf(item.value) > -1) {
												total.push(item.label.split('\t')[0]);
											}
											return total;
										}, [])
										.join(', ')}
								</div>
							</div>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>资产地址</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									{jobList
										.reduce((total, item) => {
											if (formData.job_ids.indexOf(item.value) > -1) {
												total.push(item.label.split('\t')[1]);
											}
											return total;
										}, [])
										.join(', ')}
								</div>
							</div>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>任务类型</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									{formData.trigger_type === 'schedule' ? '周期性' : '单次'}任务
								</div>
							</div>
						</>
					) : (
						<>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>监测类型</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									{formData.task_type === 'http' ? 'HTTP' : 'Ping'}监测
								</div>
							</div>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>监测目标</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									{(function () {
										const jobName = taskList[0]?.jobName?.split('(')[0];
										const ip = taskList[0]?.jobName?.split('(')[1]
											? `(${taskList[0]?.jobName?.split('(')[1]}`
											: '';
										const toolBox = taskList?.map(item => {
											const jobName = item?.jobName?.split('(')[0];
											const ip = item?.jobName?.split('(')[1]
												? `(${item?.jobName?.split('(')[1]}`
												: '';
											return (
												<div>
													<span
														style={{
															display: 'inline-block',
															maxWidth: '120px',
															padding: '5px 10px',
															overflow: 'hidden',
															textOverflow: 'ellipsis',
															whiteSpace: 'nowrap',
														}}
														title={item.name}
													>
														{item.name}
													</span>
													<span
														style={{
															display: 'inline-block',
															maxWidth: '300px',
															padding: '5px 10px',
															overflow: 'hidden',
															textOverflow: 'ellipsis',
															whiteSpace: 'nowrap',
														}}
														title={jobName + item.target + ip}
													>
														{jobName + item.target + ip}
													</span>
													<span
														style={{
															display: 'inline-block',
															maxWidth: '100px',
															padding: '5px 10px',
															overflow: 'hidden',
															textOverflow: 'ellipsis',
															whiteSpace: 'nowrap',
														}}
														title={intervalFormat(item.interval) + '1次'}
													>
														{intervalFormat(item.interval)}1次
													</span>
												</div>
											);
										});
										return (
											<div>
												<span>
													{jobName + taskList[0].target + ip}
													{taskList.length > 1 && `等${taskList.length}个`}
												</span>
												<Tooltip
													overlay={
														<div
															style={{
																maxWidth: '500px',
																maxHeight: '300px',
																overflow: 'auto',
															}}
														>
															{toolBox}
														</div>
													}
													placement={'rightBottom'}
												>
													<Icon
														type={'detail'}
														className={cn(s.mainColor, s.cp, s.ml5, s.vam)}
													/>
												</Tooltip>
											</div>
										);
									})()}
								</div>
							</div>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>监测节点</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									{(function () {
										const area = cloneDeep(
											formData.task_settings?.collect?.area
										);
										const area_ipv6 = cloneDeep(
											formData.task_settings?.collect?.area_ipv6
										);
										const areaMap = aviliableNode?.v4_area?.reduce((t, i) => {
											const item = cloneDeep(i);
											if (item.enable) {
												delete item.enable;
												t[Object.keys(item)[0]] = item[Object.keys(item)[0]];
											}
											return t;
										}, {});
										const areaIpv6Map = aviliableNode?.v6_area?.reduce(
											(t, i) => {
												const item = cloneDeep(i);
												if (item.enable) {
													delete item.enable;
													t[Object.keys(item)[0]] = item[Object.keys(item)[0]];
												}
												return t;
											},
											{}
										);
										let ipv4 = '';
										if (area && area.length > 0) {
											ipv4 = (
												<span>
													IPv4：
													{areaMap[area[0]] +
														(area.length > 1
															? `等${area.length}个监测节点`
															: '')}
													<Tooltip
														overlay={
															<div
																style={{
																	maxWidth: '500px',
																	maxHeight: '300px',
																	overflow: 'auto',
																}}
															>
																{area
																	.map(i => {
																		return areaMap[i];
																	})
																	.join('、')}
															</div>
														}
														placement={'top'}
													>
														<Icon
															type={'detail'}
															className={cn(s.mainColor, s.cp, s.ml5, s.vam)}
														/>
													</Tooltip>
												</span>
											);
										}
										let ipv6 = '';
										if (area_ipv6 && area_ipv6.length > 0) {
											ipv6 = (
												<span>
													IPv6：
													{areaIpv6Map[area_ipv6[0]] +
														(area_ipv6.length > 1
															? `等${area_ipv6.length}个监测节点`
															: '')}
													<Tooltip
														overlay={
															<div
																style={{
																	maxWidth: '500px',
																	maxHeight: '300px',
																	overflow: 'auto',
																}}
															>
																{area_ipv6
																	.map(i => {
																		return areaIpv6Map[i];
																	})
																	.join('、')}
															</div>
														}
														placement={'top'}
													>
														<Icon
															type={'detail'}
															className={cn(s.mainColor, s.cp, s.ml5, s.vam)}
														/>
													</Tooltip>
												</span>
											);
										}
										return (
											<>
												{ipv4 && <p>{ipv4}</p>}
												{ipv6 && <p>{ipv6}</p>}
												{!ipv6 && (
													<p className={cn(s.warningColor, s.mb0)}>
														监测节点默认配置IPv4节点，若您需要配置IPv6节点，请在监测配置页面进行配置。
													</p>
												)}
											</>
										);
									})()}
								</div>
							</div>
							{formData.task_type === 'http' && (
								<>
									<div className={cn(s.df, s.aic, s.bd)}>
										<div className={cn(s.p10_20)}>请求方式</div>
										<div className={cn(s.p10_20, s.bdl, s.flex1)}>
											{formData.task_settings?.collect?.method?.toUpperCase()}
										</div>
									</div>
									<div className={cn(s.df, s.aic, s.bd)}>
										<div className={cn(s.p10_20)}>请求头信息</div>
										<div className={cn(s.p10_20, s.bdl, s.flex1, s.ofh)}>
											<span className={s.wwb}>
												{formData.task_settings?.collect?.header || '- -'}
											</span>
										</div>
									</div>
								</>
							)}
							{formData.task_type === 'http' &&
								['post', 'put'].includes(
									formData?.task_settings?.collect?.method
								) && (
									<div className={cn(s.df, s.aic, s.bd)}>
										<div className={cn(s.p10_20)}>提交内容</div>
										<div className={cn(s.p10_20, s.bdl, s.flex1, s.ofh)}>
											<span className={s.wwb}>
												{formData.task_settings?.collect?.payload || '- -'}
											</span>
										</div>
									</div>
								)}
							{formData.task_type === 'http' && (
								<div className={cn(s.df, s.aic, s.bd)}>
									<div className={cn(s.p10_20)}>重定向次数</div>
									<div className={cn(s.p10_20, s.bdl, s.flex1)}>
										最多允许页面跳转
										{formData.task_settings?.collect?.redirect
											? formData.task_settings?.collect?.redirect[0]
											: '- -'}
										次
									</div>
								</div>
							)}
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>可用性异常信息</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									<p>
										响应时间大于等于{formData.task_settings?.alert?.respTime}ms
									</p>
									<p className={s.mb0}>
										{formData.task_type === 'ping'
											? `或丢包率大于等于${formData.task_settings?.alert?.lossRate}%时告警`
											: `状态码范围：${formData.task_settings?.alert?.statusCodeRange}`}
									</p>
								</div>
							</div>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>告警条件</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									节点异常大于等于{formData.task_settings?.alert?.nodeCount}
									个时告警
								</div>
							</div>
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>告警次数</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									每次异常或故障最多告警
									{formData.task_settings?.alert?.alertCount
										? formData.task_settings?.alert?.alertCount[0]
										: ''}
									次
								</div>
							</div>
						</>
					)}
					{assetType !== 'aviliable' && formData.vul_settings?.enable && (
						<div className={cn(s.df, s.aic, s.bd)}>
							<div className={cn(s.p10_20)}>Web漏洞</div>
							<div className={cn(s.p10_20, s.bdl, s.flex1)}>
								<div className={cn(s.subItem, s.df, s.aic)}>
									<span>
										监测内容：
										{formData.vul_settings.vulType === 'all' ? (
											'所有漏洞类型'
										) : (
											<span>
												{formData.vul_settings?.vulType === 'plugIn' ? (
													formData.vul_settings?.collect?.vulns.length > 0 ? (
														<>
															{formData.vul_settings?.collect?.vulns
																?.slice(0, 2)
																.map(item => {
																	return vulnsMap[item];
																})
																.join('、')}
															等{formData.vul_settings?.collect?.vulns?.length}
															类
															<Tooltip
																overlay={
																	<div
																		style={{
																			maxWidth: '500px',
																			maxHeight: '300px',
																			overflow: 'auto',
																		}}
																	>
																		{formData.vul_settings?.collect?.vulns
																			?.map(item => {
																				return vulnsMap[item];
																			})
																			.join('、')}
																	</div>
																}
																placement={'top'}
															>
																<Icon
																	type={'detail'}
																	className={cn(
																		s.mainColor,
																		s.cp,
																		s.ml5,
																		s.vam
																	)}
																/>
															</Tooltip>
														</>
													) : (
														'- -'
													)
												) : formData.vul_settings?.collect?.vul?.length > 0 ? (
													<>
														{formData.vul_settings?.collect?.vul
															?.slice(0, 2)
															.map(item => {
																return VUL_TYPE_MAP[item];
															})
															.join('、')}
														等{formData.vul_settings?.collect?.vul?.length}类
														<Tooltip
															overlay={
																<div
																	style={{
																		maxWidth: '500px',
																		maxHeight: '300px',
																		overflow: 'auto',
																	}}
																>
																	{formData.vul_settings?.collect?.vul
																		?.map(item => {
																			return VUL_TYPE_MAP[item];
																		})
																		.join('、')}
																</div>
															}
															placement={'top'}
														>
															<Icon
																type={'detail'}
																className={cn(s.mainColor, s.cp, s.ml5, s.vam)}
															/>
														</Tooltip>
													</>
												) : (
													'- -'
												)}
											</span>
										)}
									</span>
									{formData.trigger_type === 'schedule' &&
									formData.vul_settings?.collect?.type === 'increment' ? (
										formData.vul_settings?.enableSitePortraitTriggerMonitor ? (
											<span>网站画像监测引擎: 开启</span>
										) : (
											''
										)
									) : (
										<span>
											监测深度：{formData.vul_settings?.collect?.depth[0]}层
										</span>
									)}
								</div>
								{formData.vul_settings?.collect?.type !== 'increment' && (
									<div className={cn(s.subItem, s.df, s.aic)}>
										{formData.trigger_type === 'schedule' && (
											<span>
												监测模式：
												{formData.vul_settings?.collect?.speed
													? formData.vul_settings?.collect?.speed[0] === 'high'
														? '仅高危'
														: '高、中、低危'
													: ''}
											</span>
										)}
										<span>
											监测最大URL数：
											{formData.vul_settings?.collect?.maxPage[0]}
										</span>
									</div>
								)}
							</div>
						</div>
					)}
					{assetType !== 'aviliable' && formData.ssl_settings?.enable && (
						<div className={cn(s.df, s.aic, s.bd)}>
							<div className={cn(s.p10_20)}>SSL安全</div>
							<div className={cn(s.p10_20, s.bdl, s.flex1)}>
								<div className={cn(s.subItem, s.df, s.aic)}>
									<span>
										监测内容：
										{formData.ssl_settings?.sslType === 'all' ? (
											'所有类型威胁'
										) : (
											<span>
												{formData.ssl_settings?.collect?.pluginCategories
													?.map(item => {
														return SSL_CATEGORY_KEY_LABEL_MAP[item];
													})
													.join(', ')}
											</span>
										)}
									</span>
								</div>
							</div>
						</div>
					)}
					{assetType !== 'aviliable' &&
						formData.security_event_settings?.enable && (
							<div className={cn(s.df, s.aic, s.bd)}>
								<div className={cn(s.p10_20)}>安全事件</div>
								<div className={cn(s.p10_20, s.bdl, s.flex1)}>
									<div className={cn(s.subItem, s.df, s.aic)}>
										<span>
											监测内容：
											{formData.security_event_settings?.securityType ===
											'all' ? (
												'所有类型事件'
											) : formData.security_event_settings?.collect?.plugins
													?.length > 0 ? (
												<span>
													{formData.security_event_settings?.collect?.plugins
														?.slice(0, 2)
														.map(item => {
															return SECURITY_EVENT_TYPE_MAP[item];
														})
														.join('、')}
													{formData.security_event_settings?.collect?.plugins
														?.length > 2 &&
														`等${formData.security_event_settings?.collect?.plugins?.length}类`}
													{formData.security_event_settings?.collect?.plugins
														?.length > 2 && (
														<Tooltip
															overlay={
																<div
																	style={{
																		maxWidth: '500px',
																		maxHeight: '300px',
																		overflow: 'auto',
																	}}
																>
																	{formData.security_event_settings?.collect?.plugins
																		?.map(item => {
																			return SECURITY_EVENT_TYPE_MAP[item];
																		})
																		.join('、')}
																</div>
															}
															placement={'top'}
														>
															<Icon
																type={'detail'}
																className={cn(s.mainColor, s.cp, s.ml5, s.vam)}
															/>
														</Tooltip>
													)}
												</span>
											) : (
												'- -'
											)}
										</span>
										<span>
											监测深度：
											{formData.security_event_settings?.collect?.depth[0]}层
										</span>
									</div>
									<div className={cn(s.subItem, s.df, s.aic)}>
										<span>
											监测最大URL数：
											{formData.security_event_settings?.collect?.maxPage[0]}
										</span>
									</div>
								</div>
							</div>
						)}
					{assetType !== 'aviliable' && formData.content_settings?.enable && (
						<div className={cn(s.df, s.aic, s.bd)}>
							<div className={cn(s.p10_20)}>内容违规</div>
							<div className={cn(s.p10_20, s.bdl, s.flex1)}>
								<div className={cn(s.subItem, s.df, s.aifs)}>
									<span>
										监测内容：
										<span className={cn(s.dib, s.vat)}>
											{formData.content_settings?.collect
												?.systemKeywordStatus ? (
												<>
													<span>
														敏感词：
														{formData.content_settings?.collect
															?.systemKeywordTypes?.length > 0 ? (
															<>
																{formData.content_settings?.collect?.systemKeywordTypes
																	?.slice(0, 2)
																	.map(item => {
																		return CONTENT_KEYWORD_TYPES_MAP[item];
																	})
																	.join('、')}
																{formData.content_settings?.collect
																	?.systemKeywordTypes?.length > 2 &&
																	`等${formData.content_settings?.collect?.systemKeywordTypes?.length}类`}
																{formData.content_settings?.collect
																	?.systemKeywordTypes?.length > 2 && (
																	<Tooltip
																		overlay={
																			<div
																				style={{
																					maxWidth: '500px',
																					maxHeight: '300px',
																					overflow: 'auto',
																				}}
																			>
																				{formData.content_settings?.collect?.systemKeywordTypes
																					?.map(item => {
																						return CONTENT_KEYWORD_TYPES_MAP[
																							item
																						];
																					})
																					.join('、')}
																			</div>
																		}
																		placement={'top'}
																	>
																		<Icon
																			type={'detail'}
																			className={cn(
																				s.mainColor,
																				s.cp,
																				s.ml5,
																				s.vam
																			)}
																		/>
																	</Tooltip>
																)}
															</>
														) : (
															'- -'
														)}
													</span>
													<br />
												</>
											) : (
												''
											)}
											{formData.content_settings?.collect
												?.privacyDisclosureStatus ? (
												<span>
													隐私信息：
													{formData.content_settings?.collect
														?.privacyDisclosureTypes?.length > 0 ? (
														<>
															{formData.content_settings?.collect?.privacyDisclosureTypes
																?.slice(0, 2)
																.map(item => {
																	return CONTENT_PRIVACY_DISCLOSURE_TYPES_MAP[
																		item
																	];
																})
																.join('、')}
															{formData.content_settings?.collect
																?.privacyDisclosureTypes?.length > 2 &&
																`等${formData.content_settings?.collect?.privacyDisclosureTypes?.length}类`}
															{formData.content_settings?.collect
																?.privacyDisclosureTypes?.length > 2 && (
																<Tooltip
																	overlay={
																		<div
																			style={{
																				maxWidth: '500px',
																				maxHeight: '300px',
																				overflow: 'auto',
																			}}
																		>
																			{formData.content_settings?.collect?.privacyDisclosureTypes
																				?.map(item => {
																					return CONTENT_PRIVACY_DISCLOSURE_TYPES_MAP[
																						item
																					];
																				})
																				.join('、')}
																		</div>
																	}
																	placement={'top'}
																>
																	<Icon
																		type={'detail'}
																		className={cn(
																			s.mainColor,
																			s.cp,
																			s.ml5,
																			s.vam
																		)}
																	/>
																</Tooltip>
															)}
														</>
													) : (
														'- -'
													)}
												</span>
											) : (
												''
											)}
										</span>
									</span>
									{formData.content_settings.type === 'assign' ? (
										formData.content_settings.collect.includeUrl ? (
											<span>
												监测URL:{' '}
												{formData.content_settings.collect?.includeUrl?.split(
													'\n'
												)}
											</span>
										) : (
											''
										)
									) : (
										<span>
											监测深度：{formData.content_settings?.collect?.depth[0]}层
										</span>
									)}
								</div>
								{formData.content_settings.type !== 'assign' && (
									<div className={cn(s.subItem, s.df, s.aic)}>
										<span>
											监测最大URL数：
											{formData.content_settings?.collect?.maxPage[0]}
										</span>
									</div>
								)}
							</div>
						</div>
					)}
					{assetType !== 'aviliable' && (
						<>
							{formData.job_ids.length === 1 &&
								(formData.prelogin?.site_login ||
									formData.prelogin?.is_http_auth_enabled ||
									formData.prelogin?.is_proxy_enabled) && (
									<div className={cn(s.df, s.aic, s.bd)}>
										<div className={cn(s.p10_20)}>预登录</div>
										<div className={cn(s.p10_20, s.bdl, s.flex1)}>
											<div className={s.mb10}>
												网站登录：{formData.prelogin?.site_login ? '已' : '未'}
												设置
											</div>
											<div className={s.mb10}>
												HTTP认证：
												{formData.prelogin?.is_http_auth_enabled ? '已' : '未'}
												设置
											</div>
											<div>
												代理服务器：
												{formData.prelogin?.is_proxy_enabled ? '已' : '未'}设置
											</div>
										</div>
									</div>
								)}
							{formData.job_ids.length === 1 &&
								(formData.custom_monitor_page?.includeUrl ||
									formData.custom_monitor_page?.excludeUrl) && (
									<div className={cn(s.df, s.aic, s.bd)}>
										<div className={cn(s.p10_20)}>自定义监测页面</div>
										<div className={cn(s.p10_20, s.bdl, s.flex1)}>
											<div className={s.mb10}>
												需要额外监测页面入口：
												{formData.custom_monitor_page?.includeUrl
													? formData.custom_monitor_page?.includeUrl?.split(
															'\n'
													  ).length > 0
														? '已设置'
														: '未设置'
													: '未设置'}
											</div>
											<div>
												不需要监测页面：
												{formData.custom_monitor_page?.excludeUrl
													? formData.custom_monitor_page?.excludeUrl?.split(
															'\n'
													  ).length > 0
														? '已设置'
														: '未设置'
													: '未设置'}
											</div>
										</div>
									</div>
								)}
						</>
					)}
				</div>
			</Dialog>
		</div>
	);
}
CreateJob.propTypes = {
	assetType: PropTypes.string,
	location: PropTypes.any,
	history: PropTypes.any,
};
export default withRouter(CreateJob);
